Super Video Page

Video Grid Layout & Pagination Handling

Overview

This document outlines various solutions for handling video grids with different column counts, aspect ratios, pagination, and the alignment of the last row.

Features

1. Dynamic Column Switching
2. Handling Different Aspect Ratios (4:3 vs 16:9)
3. Ellipsis for Long Titles
4. Pagination per Section
5. Aligning Last Row Elements

---

1. Dynamic Column Switching

This allows users to dynamically change the number of columns for each video grid section.

HTML Structure

<h2>Featured Videos</h2>
<div class="video-grid" data-columns="3">
    <div class="video-item">Video 1</div>
    <div class="video-item">Video 2</div>
    <div class="video-item">Video 3</div>
    <div class="video-item">Video 4</div>
</div>
<button class="change-columns" data-new-columns="5">Change to 5 Columns</button>

JavaScript to Adjust Columns

document.querySelectorAll('.change-columns').forEach(button => {
    button.addEventListener('click', function() {
        const grid = this.previousElementSibling;
        const newColumns = this.dataset.newColumns;
        grid.style.gridTemplateColumns = `repeat(${newColumns}, 1fr)`;
    });
});

---

2. Handling Different Aspect Ratios (4:3 vs 16:9)

CSS for Aspect Ratio Handling

.video-thumb-wrap {
    position: relative;
    width: 100%;
    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%);
}

Alternative: Separate Sections for 4:3 and 16:9

<h2>4:3 Videos</h2>
<div class="video-grid video-4-3">
    <div class="video-item">Video 1</div>
    <div class="video-item">Video 2</div>
</div>

<h2>16:9 Videos</h2>
<div class="video-grid video-16-9">
    <div class="video-item">Video 3</div>
    <div class="video-item">Video 4</div>
</div>

---

3. Ellipsis for Long Titles

.video-title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

---

4. Pagination per Section

Each video section has its own pagination system, handled by JavaScript.

HTML Structure

<nav class="pagination">
    <div class="pagination-edge">
        <a href="#" class="prev-page">&lt; BACK</a>
    </div>
    <div class="pagination-center">
        <ul class="inline-list">
            <li class="hide_mobile"><a href="#">1</a></li>
            <li class="hide_mobile"><a>...</a></li>
            <li class="hide_mobile"><a href="#">5</a></li>
            <li class="active"><a href="#">7</a></li>
            <li class="hide_mobile"><a href="#">8</a></li>
            <li class="hide_mobile"><a href="#">...</a></li>
            <li class="hide_mobile"><a href="#">17</a></li>
        </ul>
    </div>
    <div class="pagination-edge">
        <a href="#" class="next-page">NEXT &gt;</a>
    </div>
</nav>

JavaScript for Pagination Handling

document.querySelectorAll('.pagination a').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault();
        console.log(`Navigating to page: ${this.textContent}`);
    });
});

---

5. Aligning Last Row Elements

This JavaScript solution dynamically centers the last few elements if the row is not completely filled.

JavaScript to Adjust Last Row

function adjustLastRow(grid) {
    const items = grid.querySelectorAll('.video-item');
    const columns = parseInt(getComputedStyle(grid).gridTemplateColumns.split(' ').length);
    const lastRowCount = items.length % columns;
    
    if (lastRowCount > 0) {
        const lastRowItems = Array.from(items).slice(-lastRowCount);
        lastRowItems.forEach((item, index) => {
            item.style.marginLeft = (index === 0) ? 'auto' : '';
            item.style.marginRight = (index === lastRowItems.length - 1) ? 'auto' : '';
        });
    }
}

document.querySelectorAll('.video-grid').forEach(grid => adjustLastRow(grid));

---

Summary

• Column switching lets users toggle between grid layouts.
• Aspect ratio handling crops 16:9 videos without scaling.
• Long titles are truncated with ellipsis.
• Pagination is implemented per section.
• The last row centers its elements dynamically.

This setup ensures the layout adapts well to different video counts, screen sizes, and configurations.