On-Demand Embedded Videos

Reduce initial-load page weight by only loading embedded video resources on-demand.

Embedded videos from 3rd-party platforms like Vimeo and YouTube are a great way to include videos directly on a webpage, but can add more than 500KB of page weight even when they're not played. This technique replaces a placeholder image and link to the video with the embedded video when clicked. The image and link doubles as a perfect no-JavaScript fallback.

An on-demand embedded video in action:

The HTML

Start with a link and thumbnail image, wrapped in a container with the video ID stored as a data attribute.

<div class="video" data-videoid="VIDEO ID">
    <a href="https://www.youtube.com/watch?v=VIDEO ID" target="_blank" rel="noreferrer nofollow">
        <img src="https://img.youtube.com/vi/VIDEO ID/sddefault.jpg" width="WIDTH" height="HEIGHT" alt="VIDEO TITLE" loading="lazy">
    </a>
</div>

The CSS

Style the placeholder image link as desired, including a custom play button. This setup also uses a technique for responsive embedded videos that scale with a custom aspect ratio.

.video {padding-bottom:56.25%;position:relative} /*--- bottom (or top) padding sets aspect ratio ---*/

    /*--- placeholder link & <iframe> (when loaded) ---*/
    .video a, .video iframe {display:block;width:100%;height:100%;position:absolute}
        .video iframe {border:0}

        /*--- optional custom play button ---*/
        .video a::before {}

        /*--- placeholder/preview image ---*/
        .video img {object-fit:cover;height:100%;width:100%}

The JavaScript

Replace the image link with a normal embedded video <iframe> when the placeholder is clicked.

var videos = document.querySelectorAll('.video'); // select all .video elements

for (var i = 0; i < videos.length; i++) { // for each
    videos[i].addEventListener('click', function() { // on click
        var iframe = document.createElement('iframe'); // create <iframe>
        iframe.setAttribute('allowfullscreen', ''); // set attributes
        iframe.setAttribute('allow', 'autoplay; fullscreen');
        iframe.setAttribute('src', 'https://www.youtube.com/embed/'+ this.dataset.videoid +'?autoplay=1'); // populate video ID
        this.innerHTML = ''; // remove existing HTML (<a> & <img>)
        this.appendChild(iframe); // replace with <iframe>
        event.preventDefault(); // prevent link action
    });
};

Without JavaScript

This sans-JavaScript alternative is more limited in features and browser support, but similarly avoids loading the full embedded video resources until the user clicks the play button. The srcdoc attribute supersedes the regular src attribute in browsers that support it.

<div class="video">
    <iframe src="https://www.youtube.com/embed/VIDEO ID?rel=0&autoplay=1" srcdoc="<style>*{display:block;padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:-1px;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.2em black}</style><a href='https://www.youtube.com/embed/VIDEO ID?rel=0&autoplay=1'><img src='https://img.youtube.com/vi/VIDEO ID/sddefault.jpg' alt='Video Title Goes Here' loading='lazy'><span>▶</span></a>" allow="autoplay fullscreen" allowfullscreen title="Video Title Goes Here" loading="lazy"></iframe>
</div>

Responsive Embedded Videos

This technique works great when combined with mobile friendly, automatically-scaling embedded videos: