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.
In the interests of progressive enhancement I made three quick changes to his code:
- I added a style so that any links in the box are white (look for
.youtube-player ain the CSS)
- Into the box I added a plain text link to the video at YouTube.
- 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
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.
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
In response to.
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.
Nice piece of code, thanks a lot !
One suggestion though, the background-image uploaded is really low quality, I got a better one using :
instead of :
In response to.
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