Tweaked ‘Better Method’ YouTube Embed

Last week Amit Agarwal posted a great tutorial on making YouTube embeds less of a burden for users, A Better Method for Embedding YouTube Videos on your Website. The abstract:

Learn how to embed YouTube videos responsively and without increasing the page load time. The embeds are light and mobile friendly and the YouTube player is loaded only when the user initiates the video playback.

Pie chart showing the render time of a YouTube embed (1.07s).
I’m slowing my page by a second just to load a placeholder YouTube embed.

As a fan of reducing the weight of pages, I dived right in. Something stood out to me, however, that I saw an opportunity to improve.

The method presumes the user has a landed on a page where she can enjoy the benefits of JavaScript. We all know, however, that network lag, broken third-party scripts, content policies, and even the rare user with JavaScript disabled, can render these benefits useless. Unless there is a plain text link to the YouTube video.

In the interests of progressive enhancement I made three quick changes to his code:

  1. I added a style so that any links in the box are white (look for .youtube-player a in the CSS)
  2. Into the box I added a plain text link to the video at YouTube.
  3. I compressed and then converted the play button to a base64 data URL (removing a possible 403 from imgur and an extra request).

Sadly, you will need to enter two data points now: the URL for the link and the bulk of that URL into the data-id. A skilled JavaScripter could take care of that for you (since I am writing this while waiting for dinner to finish cooking).

I have posted an example on CodePen and embedded it below.

See the Pen Tweaked ‘Better Method’ YouTube Embed by Adrian Roselli (@aardrian) on CodePen.

Update: August 8, 2019

There is a no-JS technique that may be worth exploring: Lazy load embedded YouTube videos

A pen showing it in action:

See the Pen Tweaked ‘Lazy load embedded YouTube videos’ by Adrian Roselli (@aardrian) on CodePen.

4 Comments

Reply

Hi Adrian,

I wrote something similar a short while ago to handle multiple videos on demand.
Currently in Accessiblity testing, I’d seriously appreciate any feedback.

CodePen: Button to embed video iframe
GitHub: Embed video iframe

Mike

In response to mike. Reply

Mike, I see from your notes that you tested it across browsers, but what assistive technology did you use? I ask because at a glance I see some odd use of roles and document structure. I forked it so that I could run it in Debug Mode in CodePen, making it easier to check with a screen reader: https://s.codepen.io/aardrian/debug/amwmPK

I would be interested to see the results from the accessibility testing you have commissioned. Please let us know how it fares.

Reply

Hi,
Nice piece of code, thanks a lot !

One suggestion though, the background-image uploaded is really low quality, I got a better one using :
“https://i.ytimg.com/vi/XMAksFzFh9E/maxresdefault.jpg”

instead of :
”https://i.ytimg.com/vi/XMAksFzFh9E/hqdefault.jpg”

Mathieu

Mathieu; . Permalink
In response to Mathieu. Reply

Mathieu, that’s great, thanks! And it works for the lazy load embedded YouTube videos example linked at the end of my post.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>