VIDEO CAROUSEL ON LANDING PAGE

Hi! I am currently trying to build a video carousel on my landing page, but the sizing is just not working. While it appears to be fine, on certain devices, the videos I am uploading look square instead of the original full 16:9 video frame. Can anyone let me know why that might be? This is the code I am using:

HTML/CODE BLOCK:

<div class="video-carousel">

    <button class="prev">‹</button>

    <div class="carousel-container">

        <div class="carousel-slide">

            <iframe src="https://www.youtube.com/embed/xHoxT8-_7dA?si=HZOOPxYJRrqAVGT0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

        <div class="carousel-slide">

            <iframe src="https://player.vimeo.com/video/898605756?h=25a9588e05" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

        <div class="carousel-slide">

            <iframe src="https://www.youtube.com/embed/video3ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

    </div>

    <button class="next">›</button>

</div>

CSS:

/* Aspect ratio container for the video carousel */

.video-carousel {

    position: relative;

    width: 100%;

    max-width: 800px; /* Adjust as needed */

    margin: auto; /* Center align */

    overflow: hidden;

    padding-top: 56.25%; /* 16:9 Aspect Ratio */

}

/* Container holding slides */

.carousel-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center; /* Center slides vertically */

}

/* Style for each slide */

.carousel-slide {

    min-width: 100%;

    height: 100%; /* Ensure each slide takes full height */

    box-sizing: border-box;

    display: flex;

    justify-content: center; /* Center content horizontally */

    align-items: center; /* Center content vertically */

}

/* Style for iframes to fit the slide */

.carousel-slide iframe {

    width: 100%; /* Fit the width of the slide */

    height: 100%; /* Ensure iframe fills the height of the slide */

    border: none; /* Remove iframe border */

}

/* Style for navigation buttons */

.video-carousel button {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */

    color: white;

    border: none;

    padding: 10px;

    cursor: pointer;

    z-index: 1000;

}

/* Positioning the buttons */

.video-carousel .prev {

    left: 10px;

}

.video-carousel .next {

    right: 10px;

}

/* Responsive adjustments */

@media (max-width: 600px) {

    .video-carousel {

        max-width: 100%; /* Full width on small screens */

    }

    .video-carousel button {

        padding: 5px; /* Smaller padding for buttons on mobile */

    }

}

JAVA SCRIPT (FOOTER):

<script>

document.addEventListener('DOMContentLoaded', () => {

    const prevButton = document.querySelector('.prev');

    const nextButton = document.querySelector('.next');

    const carouselContainer = document.querySelector('.carousel-container');

    const slides = document.querySelectorAll('.carousel-slide');

    let index = 0;

    function showSlide(n) {

        if (n >= slides.length) {

            index = 0;

        } else if (n < 0) {

            index = slides.length - 1;

        } else {

            index = n;

        }

        carouselContainer.style.transform = `translateX(-${index * 100}%)`;

    }

    prevButton.addEventListener('click', () => {

        showSlide(index - 1);

    });

    nextButton.addEventListener('click', () => {

        showSlide(index + 1);

    });

    // Optional: Autoplay functionality

    setInterval(() => {

        showSlide(index + 1);

    }, 5000); // Change slide every 5 seconds

});

</script>

20 hours ago, melek said:

Hi! I am currently trying to build a video carousel on my landing page, but the sizing is just not working. While it appears to be fine, on certain devices, the videos I am uploading look square instead of the original full 16:9 video frame. Can anyone let me know why that might be? This is the code I am using:

HTML/CODE BLOCK:

<div class="video-carousel">

    <button class="prev">‹</button>

    <div class="carousel-container">

        <div class="carousel-slide">

            <iframe src="https://www.youtube.com/embed/xHoxT8-_7dA?si=HZOOPxYJRrqAVGT0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

        <div class="carousel-slide">

            <iframe src="https://player.vimeo.com/video/898605756?h=25a9588e05" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

        <div class="carousel-slide">

            <iframe src="https://www.youtube.com/embed/video3ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

        </div>

    </div>

    <button class="next">›</button>

</div>

CSS:

/* Aspect ratio container for the video carousel */

.video-carousel {

    position: relative;

    width: 100%;

    max-width: 800px; /* Adjust as needed */

    margin: auto; /* Center align */

    overflow: hidden;

    padding-top: 56.25%; /* 16:9 Aspect Ratio */

}

 

/* Container holding slides */

.carousel-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center; /* Center slides vertically */

}

 

/* Style for each slide */

.carousel-slide {

    min-width: 100%;

    height: 100%; /* Ensure each slide takes full height */

    box-sizing: border-box;

    display: flex;

    justify-content: center; /* Center content horizontally */

    align-items: center; /* Center content vertically */

}

 

/* Style for iframes to fit the slide */

.carousel-slide iframe {

    width: 100%; /* Fit the width of the slide */

    height: 100%; /* Ensure iframe fills the height of the slide */

    border: none; /* Remove iframe border */

}

/* Style for navigation buttons */

.video-carousel button {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */

    color: white;

    border: none;

    padding: 10px;

    cursor: pointer;

    z-index: 1000;

}

/* Positioning the buttons */

.video-carousel .prev {

    left: 10px;

}

.video-carousel .next {

    right: 10px;

}

 

/* Responsive adjustments */

@media (max-width: 600px) {

    .video-carousel {

        max-width: 100%; /* Full width on small screens */

    }

 

    .video-carousel button {

        padding: 5px; /* Smaller padding for buttons on mobile */

    }

}

 

JAVA SCRIPT (FOOTER):

<script>

document.addEventListener('DOMContentLoaded', () => {

    const prevButton = document.querySelector('.prev');

    const nextButton = document.querySelector('.next');

    const carouselContainer = document.querySelector('.carousel-container');

    const slides = document.querySelectorAll('.carousel-slide');

    let index = 0;

 

    function showSlide(n) {

        if (n >= slides.length) {

            index = 0;

        } else if (n < 0) {

            index = slides.length - 1;

        } else {

            index = n;

        }

        carouselContainer.style.transform = `translateX(-${index * 100}%)`;

    }

 

    prevButton.addEventListener('click', () => {

        showSlide(index - 1);

    });

 

    nextButton.addEventListener('click', () => {

        showSlide(index + 1);

    });

 

    // Optional: Autoplay functionality

    setInterval(() => {

        showSlide(index + 1);

    }, 5000); // Change slide every 5 seconds

});

</script>

Can you share your URL with protected password so we can check it?

Yes! https://watermelon-icosahedron-sksr.squarespace.com/ with password: California22