YouTube embed code iframe hack

This is my first tech-related blog post. I will use this platform to share interesting things I have learned in web development, SEO, and digital marketing. This brings me to my reason for this post - I learned something yesterday while working on a client’s site, Max’s Fancy Monsters that I wanted to share.

This was an experiment to get video and site speed to play together nicely

I am learning more about embedding video in websites, specifically for the youtube video player. For example, I learned that adding a YouTube video to a website affects page load. This applies to both the YouTube URL and the embed code.

To optimize your web page for mobile devices and SEO, you must ensure that your website has a quick page load time. I searched on Google to find ways to make YouTube videos load faster on websites for my experiment.

Note: Everything attempted below was with the URL taken out of the YouTube embed code snippet.

Attempt 1: Lazy load embedded YouTube videos with srdoc iframe code

I found an article that explains how to add an iframe with sroc code inside the iframe code. This creates a thumbnail that loads first instead of the entire video player.

This method improved the loading speed of the video, but it was not ideal that mobile cut off the video. For user experience, all content including video should be responsive. You can read about this workaround on CSS-Tricks and see the example code on CodePen.

Attempt 2: Built-in iframe lazy-loading

My next attempt was to add lazy loading directly into the iframe in the YouTube embed code. The improvement increased the video's load time, but it still became cropped on mobile. You can read about this workaround from Web.dev and reference the specific lazy-load YouTube code example.

Attempt 3 - Responsive iframe with CSS Code + iframe Lazy load

I found this responsive iframe code with an example specifically for YouTube iframes. This approach requires some CSS code to be added to your site in addition to the iframe code.

I added the built-in lazy-loading above. This worked and made the video responsive. The video was also no longer cropped on mobile. However, this option was still too slow. You can read about this workaround on Stackoverflow and see the YouTube example iFrame and CSS code at js.fiddle.

Conclusion: combining all three hacks into a viable workaround

In the end, I decided to put all three hacks together and it worked. The video was responsive and no longer cut off on mobile. The page load time decreased. The video loaded faster with iframe lazy-loading and the sroc code that added a thumbnail before the video player.

I am not an expert and this is not a perfect solution. Unfortunately, this solution only works with a single embed video URL. Ideally, I would love to be able to find a better workaround that will work with a YouTube playlist URL. If you have a solution, please reach out!

1/31: Update. I was able to get the code to work with a YouTube video playlist embed URL. In the code above you would swap out the video embed URL with the YouTube playlist embed URL.

Final Joshua YouTube video iframe embed code