Fast & Agile YouTube Embed – Responsive iFrame load delay with jQuery
This code is an alternative to the traditional YouTube
<iframe> embed. It will reduce the downloads of each embeded video by about 90% and have them resize responsively to all screen widths. It is made with
Great news! Eric Franklin has created a WP Plugin using my code and added Vimeo support.
I noticed that YouTube
<iframe> embeds are really slow. Upon investigation they are ~450kb for each embed. This is not the video, just the “ready to play” player. If you have a few videos on a page this could be loading a few mb of data for videos that never even get played.
The idea is simple. Only load the screen shot of the video with a play button, then load the player only after it’s been clicked. This essentially reduces each instance from ~450kb to about ~30kb.
With a bit of research I found out I was not the only one with this idea. However, no one had put together a comprehensive solution that was up to the current coding standards and fully responsive. My version is based off of the code of Alexis Ulrich who had a pretty good version of this.
Working Example & Code
- You must have jQuery running on your page. This can be done by including a single line of code that pulls from the Google CDN as shown here.
- Any spot you want to include a video simply put in the
<div>as shown above on the
HTMLtab. Just set the
<div>to the ID of the video on YouTube.
- The first
HTMLexample just shows the standard embed. If you’d like to get fancy and add some parameters, you can by adding them to the div’s
data-paramsattribute as shown in the second example.
- Add the
CSSshown to your style sheet.
- Add the
.jsfile, or directly into a
- Works on all screen widths while keeping the correct dimensions of the video. However, on mobile the user will have to tap a second time due to YouTube disabling “autoplay” on mobile. (I think this is a minor inconvenience for the data saved)
- Early versions of the responsive video concept I’m using have an additional 25px of height to accommodate the YouTube player bar. I have removed this as YouTube is now loading
HTML5players and they are truly 16:9.
- It dynamically loads the http or https version of the screen shot and the embed.
- The thumb I’m loading is about 30kb and is the “HQ Default”. If you’d like to change this based on your needs there are some other options. Just replace
JScode with the chosen option.
- The “play” button is image free and can be edited to match your site in the
CSS. Just be sure if you alter the
height/widthof anything you also watch the
marginwhich is centering it.