ACF, CSS, jQuery, PHP, Video | Type: JavascriptFull-width Responsive Autoplay Video Slider

This is an autoplay video slider. It’s a lot like the single full-width video, but with an additional container to hold the video slides and jQuery to make it slide. It’s recommended that fairly short (30 seconds or less), looped, muted videos are used.

CAVEAT still holds: If you’re specifying 16 / 9 videos in the CSS, using videos that are different aspect ratios will not fill the space properly.

HTML (created via ACF repeater field)

if(get_field('videos')):
echo '<div class="video-slider">';
$row_count = count(get_field('videos'));
    while(has_sub_field('videos')):
    $videourl = get_sub_field('video_url');
    $videoloop = get_sub_field('video_loop');
    $videomaintext = get_sub_field('video_maintext');
    $videosubtext = get_sub_field('video_subtext');
    $videobuttontext = get_sub_field('video_buttontext');
    $vidinternextern = get_sub_field('video_internalexternal');
    $videointernal = get_sub_field('video_internalbutton');
    $videoexternal = get_sub_field('video_externalbutton');
    if ($videourl) {
        echo '<div class="slide">';
        if ($videoloop == 'Yes') {
            echo '<video autoplay loop muted>';
        } else {
            echo '<video autoplay muted>'; 
        }
        echo '<source src="'.$videourl.'" type="video/mp4">';
        echo '</video>';
        if ($videomaintext) {
            echo '<div class="vidtext">';
            echo '<h1>'.$videomaintext.'</h1>';
            if ($videosubtext) {
                echo '<h3>',$videosubtext.'</h3>';
            }
            if (($vidinternextern == 'Internal') || ($videointernal)) {
                echo '<p class="read-more"><a href="'.$videointernal.'">'.$videobuttontext.'</a></p>';
            } elseif (($vidinternextern == 'External') || ($videoexternal)) {
                echo '<p class="read-more"><a href="'.$videoexternal.'" target="_blank" rel="noopener nofollow">'.$videobuttontext.'</a></p>';
            }
            echo '</div>';
        }
        echo '</div>';
    }
    endwhile;
if ($row_count > 1) {
    echo '<div class="slideshow-controls"><div class="slideshow-prev left"></div><div class="slideshow-next right"></div></div>';
}
echo '</div>';
endif;

CSS

.video-slider { background:#000; width:100%; height:auto; max-height:1000px; aspect-ratio: 16 / 9; position:relative; overflow: hidden; }
.slide { position: absolute; top:0; left: 100%; width: 100%; height:auto; max-height:1000px; aspect-ratio: 16 / 9; text-align:center; }
.slide:first-child { left: 0; }
.slide video { width: auto; height: auto; min-width: 100%; min-height: 100%; object-fit: cover!important; }

.vidtext { position:absolute; width:75%; max-width:980px; left: 50%; bottom: 18%; transform: translate(-50%, 0%); transition: bottom 0.6s ease-in-out; }
.vidtext h1 { font-size:4.2rem; color:#fff; margin:0 auto .15em; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.61); transition: font-size 0.6s ease-in-out; }
.vidtext h3 { font-size:2.7rem; line-height:1.3; padding:0; margin:0 auto .45em; color:#fff; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.61); transition: font-size 0.6s ease-in-out; }
.vidtext p.read-more a { font-size:14px; padding:8px 16px; font-weight:600; letter-spacing:.06rem; margin-top:.65em; }

.slideshow-controls { position: absolute; width: 100%; height: 50px; bottom: 45%;-webkit-transition: bottom 0.3s ease-in-out; -moz-transition: bottom 0.3s ease-in-out; -o-transition: bottom 0.3s ease-in-out; transition: bottom 0.3s ease-in-out; }
@media screen and (max-width: 1080px) {
	/*.slideshow-controls { bottom: 16px; }*/
}
.slideshow-controls .slideshow-prev { position: absolute; left: 10px; width: 50px; height: 50px; background: url(images/wideslide-prev.png) 0 0 no-repeat; opacity: 0.4; }
.slideshow-controls .slideshow-next { position: absolute; right: 10px; width: 50px; height: 50px; background: url(images/wideslide-next.png) 0 0 no-repeat; opacity: 0.4; }
.slideshow-controls .slideshow-prev:hover, .slideshow-controls .slideshow-prev:active, .slideshow-controls .slideshow-next:hover, .slideshow-controls .slideshow-next:active { opacity: 1.0; }

/***As an example, you might want to make some adjustments at selected break points to help as windows get smaller***/
@media screen and (max-width: 1300px) {
    .vidtext { max-width:800px; }
    .vidtext h1 { font-size:3.8em; }
    .vidtext h3 { font-size:2.1em; }
}

Javascript

jQuery(function($) {
 
    var pos = 0,
        slides = $('.slide'),
        numOfSlides = slides.length;
 
    function nextSlide(){
        stopCurrentVideo();
        slides.eq(pos).animate({left:'-100%'},500);
        pos = pos >= numOfSlides-1 ? 0 : ++pos;
        slides.eq(pos).css({left:'100%'}).animate({left:0},500);
    }
 
    function previousSlide(){
        stopCurrentVideo();
        slides.eq(pos).animate({left:'100%'},500);
        pos = pos == 0 ? numOfSlides-1 : --pos;
        slides.eq(pos).css({left:'-100%'}).animate({left:0},500);
    }
 
    function stopCurrentVideo(){
        $('.slider-video:eq('+pos+')').load().removeAttr('controls');
    }
 
    $('.left').click(previousSlide);
    $('.right').click(nextSlide);
 
});

Reference Links

https://jsfiddle.net/tanansatpal/ac3wnbup/1/