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.

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.