On-Demand Embedded Videos
Page Speed ChecklistReduce Initial-Load Page Weight With On-Demand 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:
Responsive Embedded Videos