ACF, CSS, PHP, Video | Type: CSSFull-width Responsive Autoplay Video with Text Overlay

This is a single, autoplay video hero that takes the place of an image slider, most often included on a homepage. Text is overlaid on the video, allowing messaging and a link to another page related to the message. It’s recommended that fairly short (30 seconds or less), looped, muted videos are used. I suppose you could unmute them, but then you’d probably not want to loop them.

CAVEAT: 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)

$videourl = get_field('video_url');
$videoloop = get_field('video_loop');
$videomaintext = get_field('video_maintext');
$videosubtext = get_field('video_subtext');
$videobuttontext = get_field('video_buttontext');
$vidinternextern = get_field('video_internalexternal');
$videointernal = get_field('video_internalbutton');
$videoexternal = get_field('video_externalbutton');
if ($videourl) {
    echo '<div class="video-container">';
        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>';
}

CSS

.video-container { position: relative; width: 100%; height:auto; aspect-ratio: 16 / 9; overflow: hidden; text-align:center; background:#000; max-height:950px; }
.video-container video { position: absolute; width: auto; height: auto; min-width: 100%; min-height: 100%; }

.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; }

/***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; }
}

Reference Links

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