On client projects, we are often tasked with embedding a Vimeo or YouTube video into a website. These sites make that task extremely easy with a one-click embed code. However, as convenient as that is, there is one major drawback – these videos reduce performance.
<iframe> embed code we are forcing that user to make additional HTTP requests. That is happening before they might even realize there is a video on the page they are interested in watching.
A solution to this issue would be to only load in the
You can see a full working demo of this technique or, keep reading for an explanation:
A typical embed code for a Vimeo video might look something like the following:
<iframe src="https://player.vimeo.com/video/83864360?autoplay=1&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
We are going to replace the above code with an <a> tag and copy the ‘src’ attribute to the
<a class="embed-video" title=”descriptive title here” href="https://player.vimeo.com/video/83864360" data-params="?autoplay=1&title=0&byline=0&portrait=0"> Play Video </a>
By replacing the
<iframe> with an
<a> tag. When this takes place we are going to prevent the default behavior of the
<a> tag and instead use the ‘href’ and ‘data’ attributes to recreate the
<iframe> that Vimeo supplied and append this into the page.
With the techniques listed above, we are able to improve individual page performance and progressively enhance the experience for our clients’ users.
You can check out the working solution on codepen: http://codepen.io/mattcass/pen/QNOxQg.