Vidalytics Video Resizer

🧪 Test Your Video with Different Aspect Ratios

CSS Code to Copy

/* Vidalytics Responsive Video CSS */

.vidalytics-wrapper-16-9,
.vidalytics-wrapper-4-3,
.vidalytics-wrapper-21-9,
.vidalytics-wrapper-1-1,
.vidalytics-wrapper-9-16,
.vidalytics-wrapper-3-2,
.vidalytics-wrapper-2-1 {
    position: relative;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Aspect Ratio Classes - Use ONE of these on your wrapper */
.vidalytics-wrapper-16-9 { padding-bottom: 56.25%; }   /* 16:9 - Standard HD */
.vidalytics-wrapper-4-3 { padding-bottom: 75%; }        /* 4:3 - Classic TV */
.vidalytics-wrapper-21-9 { padding-bottom: 42.86%; }    /* 21:9 - Cinematic */
.vidalytics-wrapper-1-1 { padding-bottom: 100%; }       /* 1:1 - Square */
.vidalytics-wrapper-9-16 { padding-bottom: 177.78%; }   /* 9:16 - Vertical */
.vidalytics-wrapper-3-2 { padding-bottom: 66.67%; }     /* 3:2 - Photography */
.vidalytics-wrapper-2-1 { padding-bottom: 50%; }        /* 2:1 - Univisium */

/* CRITICAL: Override Vidalytics default styles */
.vidalytics-wrapper-16-9 > div[id^="vidalytics_embed_"],
.vidalytics-wrapper-4-3 > div[id^="vidalytics_embed_"],
.vidalytics-wrapper-21-9 > div[id^="vidalytics_embed_"],
.vidalytics-wrapper-1-1 > div[id^="vidalytics_embed_"],
.vidalytics-wrapper-9-16 > div[id^="vidalytics_embed_"],
.vidalytics-wrapper-3-2 > div[id^="vidalytics_embed_"],
.vidalytics-wrapper-2-1 > div[id^="vidalytics_embed_"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important; /* Removes Vidalytics default padding */
}

/* Ensure all video elements fill the container */
.vidalytics-wrapper-16-9 iframe,
.vidalytics-wrapper-16-9 video,
.vidalytics-wrapper-16-9 > div,
.vidalytics-wrapper-4-3 iframe,
.vidalytics-wrapper-4-3 video,
.vidalytics-wrapper-4-3 > div,
.vidalytics-wrapper-21-9 iframe,
.vidalytics-wrapper-21-9 video,
.vidalytics-wrapper-21-9 > div,
.vidalytics-wrapper-1-1 iframe,
.vidalytics-wrapper-1-1 video,
.vidalytics-wrapper-1-1 > div,
.vidalytics-wrapper-9-16 iframe,
.vidalytics-wrapper-9-16 video,
.vidalytics-wrapper-9-16 > div,
.vidalytics-wrapper-3-2 iframe,
.vidalytics-wrapper-3-2 video,
.vidalytics-wrapper-3-2 > div,
.vidalytics-wrapper-2-1 iframe,
.vidalytics-wrapper-2-1 video,
.vidalytics-wrapper-2-1 > div {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 12px;
}

/* Optional: Container to control max width */
.vidalytics-container {
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
}
How to use: Add this CSS to your website's stylesheet. The classes handle all aspect ratios and override Vidalytics' problematic default styles.

HTML Examples

<!-- Example 1: 16:9 Standard HD Video -->
<div class="vidalytics-container">
    <div class="vidalytics-wrapper-16-9">
        <!-- Your Vidalytics embed code here -->
        <div id="vidalytics_embed_YOUR_VIDEO_ID" style="width: 100%; position:relative; padding-top: 100%;"></div>
        <script type="text/javascript">
            // Your Vidalytics script
        </script>
    </div>
</div>

<!-- Example 2: 1:1 Square Video -->
<div class="vidalytics-container">
    <div class="vidalytics-wrapper-1-1">
        <!-- Your Vidalytics embed code here -->
    </div>
</div>

<!-- Example 3: 9:16 Vertical Video (Stories/Reels) -->
<div class="vidalytics-container">
    <div class="vidalytics-wrapper-9-16">
        <!-- Your Vidalytics embed code here -->
    </div>
</div>

<!-- Available wrapper classes:
     vidalytics-wrapper-16-9  → 16:9 ratio
     vidalytics-wrapper-4-3   → 4:3 ratio
     vidalytics-wrapper-21-9  → 21:9 ratio
     vidalytics-wrapper-1-1   → 1:1 ratio
     vidalytics-wrapper-9-16  → 9:16 ratio
     vidalytics-wrapper-3-2   → 3:2 ratio
     vidalytics-wrapper-2-1   → 2:1 ratio
-->
Important: Choose ONE wrapper class based on your desired aspect ratio. The class name determines the video's aspect ratio (e.g., vidalytics-wrapper-16-9 for 16:9).