Video 16×9 and 4×3 sorting examples

/ CODING, CHEAT SHEETS, DESIGN, design system, DesignAssets, Design - more cheats, Javascript, Featured Today, SITE, WEBSITES, Websites - more cheats, TOOLS / 4 minutes of reading

Video Layout Options

1a. Hiding Part of 16:9 to Fit in 4:3

Solution: Crop the Extra Width Instead of Scaling Up

• Use overflow: hidden; to clip the right side.

• Keep the image at 100% height so it stays crisp.

• No stretching or upscaling, just cropping.


.video-thumb-wrap {
    position: relative;
    width: 100%; /* Responsive */
    padding-top: 75%; /* 4:3 aspect ratio */
    overflow: hidden;
    background: black;
}

/* Keep original size and crop right side */
.video-thumb-wrap img,
.video-thumb-wrap video {
    position: absolute;
    top: 50%;
    left: 0;
    width: auto; /* Natural width */
    height: 100%; /* Fill height */
    transform: translateY(-50%);
}

🔥 If You Want to Center Instead of Crop Right

If you want to center the 16:9 image instead of cropping the right, change left: 0; to left: 50%; transform: translate(-50%, -50%); in the img CSS.

.video-thumb-wrap img,
.video-thumb-wrap video {
    left: 50%;
    transform: translate(-50%, -50%);
}

Slight Improvement

If you want to auto-detect aspect ratios and adjust styling without manually adding .wide, you can use CSS attribute selectors like this:

.video-thumb-wrap img[src*="16-9"] {
    left: 50%;
    transform: translate(-50%, -50%);
}

That way, any file with “16-9” in its filename will be centered automatically. If filenames are controlled by the database, this method ensures no manual class adding needed. 🚀

 

🔥 Optional: Add More Aspect Ratios Dynamically

If you plan to have other aspect ratios, you can expand this with data-aspect attributes in HTML:

<img src="16-9-video.jpg" class="video-thumb" data-aspect="16:9">

Then, use JavaScript to handle layout dynamically:

 

document.querySelectorAll('.video-thumb').forEach(img => {
    if (img.dataset.aspect === '16:9') {
        img.style.left = '50%';
        img.style.transform = 'translate(-50%, -50%)';
    }
});

 

This keeps things flexible and avoids manual .wide classes. Let me know if you want more refinements! 🚀

1b not used

Approach:

  • Define all .video-thumb-wrap containers as 4:3 aspect ratio.
  • 16:9 videos will overflow, hiding the excess while keeping them centered.
  • No stretching, no breaking grid alignment.

CSS Implementation:

.video-thumb-wrap {
    position: relative;
    width: 100%; /* Fully responsive */
    padding-top: 75%; /* 4:3 Aspect Ratio (3/4 * 100) */
    overflow: hidden; /* Hide overflowing content */
    background: black; /* Fallback */
}

.video-thumb-wrap img, .video-thumb-wrap video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 133%; /* Scale 16:9 videos to fill 4:3 */
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

HTML Example:

<div class="video-grid">
    <div class="video-item">
        <div class="video-thumb-wrap">
            <img src="4-3-video.jpg" class="video-thumb">
        </div>
        <div class="video-info">
            <span class="video-title">4:3 Video</span>
            <span class="video-date">March 1, 2025</span>
        </div>
    </div>

    <div class="video-item">
        <div class="video-thumb-wrap">
            <img src="16-9-video.jpg" class="video-thumb wide">
        </div>
        <div class="video-info">
            <span class="video-title">16:9 Video</span>
            <span class="video-date">March 3, 2025</span>
        </div>
    </div>
</div>

2. Mark in DB with Aspect and Arrange in Rows

Database Schema (MySQL Example)

CREATE TABLE videos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    thumbnail VARCHAR(255) NOT NULL,
    aspect_ratio ENUM('4-3', '16-9') NOT NULL,
    release_date DATE NOT NULL
);

Sample Data:

INSERT INTO videos (title, thumbnail, aspect_ratio, release_date) VALUES
('Classic 4:3 Video', '4-3-video-1.jpg', '4-3', '2025-03-01'),
('Another 4:3 Clip', '4-3-video-2.jpg', '4-3', '2025-03-02'),
('Modern 16:9 Video', '16-9-video-1.jpg', '16-9', '2025-03-03'),
('Another 16:9 Scene', '16-9-video-2.jpg', '16-9', '2025-03-04');

PHP Backend to Generate HTML

<?php
$pdo = new PDO('mysql:host=localhost;dbname=your_database;charset=utf8', 'your_user', 'your_password');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$stmt = $pdo->query("SELECT title, thumbnail, aspect_ratio, DATE_FORMAT(release_date, '%M %e, %Y') AS formatted_date FROM videos ORDER BY release_date DESC");
$videos = $stmt->fetchAll(PDO::FETCH_ASSOC);

$videos_4_3 = array_filter($videos, fn($video) => $video['aspect_ratio'] === '4-3');
$videos_16_9 = array_filter($videos, fn($video) => $video['aspect_ratio'] === '16-9');
?>

<div class="video-grid video-grid-4-3">
    <?php foreach ($videos_4_3 as $video): ?>
        <div class="video-item" data-class="4-3">
            <div class="video-thumb-wrap">
                <img src="<?= htmlspecialchars($video['thumbnail']) ?>" alt="<?= htmlspecialchars($video['title']) ?>">
            </div>
            <div class="video-info">
                <span class="video-title"><?= htmlspecialchars($video['title']) ?></span>
                <span class="video-date"><?= htmlspecialchars($video['formatted_date']) ?></span>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<div class="video-grid video-grid-16-9">
    <?php foreach ($videos_16_9 as $video): ?>
        <div class="video-item" data-class="16-9">
            <div class="video-thumb-wrap">
                <img src="<?= htmlspecialchars($video['thumbnail']) ?>" alt="<?= htmlspecialchars($video['title']) ?>">
            </div>
            <div class="video-info">
                <span class="video-title"><?= htmlspecialchars($video['title']) ?></span>
                <span class="video-date"><?= htmlspecialchars($video['formatted_date']) ?></span>
            </div>
        </div>
    <?php endforeach; ?>
</div>

3. JavaScript Example Using Images and Video

If you need JavaScript to auto-detect aspect ratio, use this:

document.querySelectorAll('.video-item').forEach(video => {
    let img = video.querySelector('img');
    img.onload = function () {
        let aspect = this.naturalWidth / this.naturalHeight;
        if (aspect > 1.5) {
            document.querySelector('.video-grid-16-9').appendChild(video);
        } else {
            document.querySelector('.video-grid-4-3').appendChild(video);
        }
    };
});

Summary

MethodProsCons
Cropping 16:9 to Fit 4:3Keeps grid uniform, no backend changes neededCuts off part of 16:9 videos
Mark in DB & Arrange by RowsNo frontend processing, fully optimizedRequires DB update & backend rendering
JavaScript Auto-DetectionNo DB changes required, flexibleJS runs on page load, minor delay

Final Recommendation

  • If content is database-driven, use Method 2 (DB Marking) ✅
  • If you need a quick front-end solution, use Method 1 (Cropping 16:9) ✅
  • If you can’t modify the database, use Method 3 (JavaScript Auto-Detect) ✅

This ensures a clean video grid that adapts to different aspect ratios efficiently 🚀.

Scroll to Top