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 jQuery, HTML, and CSS.

Great news! Eric Franklin has created a WP Plugin using my code and added Vimeo support.

Background

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 Solution

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

See the Pen Fast & Agile YouTube Embed by Jesse Schoberg (@schoberg) on CodePen.

Usage

1. 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.
2. Any spot you want to include a video simply put in the <div> as shown above on the HTML tab. Just set the id of the <div> to the ID of the video on YouTube.
3. The first HTML example 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-params attribute as shown in the second example.
4. Add the CSS shown to your style sheet.
5. Add the javascript to your existing .js file, or directly into a <script> tag.

Notes

• 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 HTML5 players 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 hqdefault.jpg in the JS code 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/width of anything you also watch the margin which is centering it.