How to load Responsive YouTube video embeds faster on Blogger WITHOUT any Javascript

This method of fast loading YouTube video 📼embeds on your website will change your life. It actually works!🤩 If you've been killing yourself over YouTube video embeds loading a ton of third-party JavaScripts pulling down your page speed score & affecting your website, you're not alone!

Sadly every solution on how to load the tiny image thumbnail before the dinosaur 🦖YouTube embed code was either adding more JavaScript to the already heavy template or not responsive. 

The solution here to embed YouTube videos and YouTube playlists is

  • 📲responsive
  • ✔️has literally no JavaScript
  • 🤩only shows YOUR videos in YouTube video player suggestions 
  • 🎥works for both YouTube videos & YouTube playlists
  • also adds lazy load
  • incredibly easy : something someone not knowing code at all (doveranalyst) could also implement successfully!!
📽See demo of embedding responsive youtube video on blogger that loads fast!

How to make Youtube Video embedded players load faster

Bless this person, Arthur Corenzan for coming up with an incredibly awesome idea of first loading the image (YouTube video thumbnail) before the actual YouTube video iframe load) without JavaScript. When you see Google Page Speed Insights already yelling at you in the page speed score for loading too many JavaScripts, trust me, you don't want any more of it.

  • YouTube thumbnail images 📸 are skinny — not heavy at all (and if you're still bothered in loading this image also, slap in the classic defer='true' async='true' loading='lazy' before src but be sure to use single quotes this time as shown in code below.
  • Youtube thumbnails have a very specific standard URL pattern"
  • https://i3.ytimg.com/vi/29pmns0-AN4/hqdefault.jpg
  • Be sure to copy your own video id for which you want to load the thumbnail.
⚠️Please note there's a slight difference in the YouTube video and the YouTube playlist embed URL. So, carefully follow the step-by-step tutorial below. It's really easy!

Demo

  • Step 1 : Load play ▶️ button from on blogpost page html before 📸 image loads
  • Step 2: Load image before player loads
  • Step 3: Save load time by not loading the video until the user clicks on play button
And all this without any javascript!😉😎😍😍

So, the style element designs

  • a play button that loads before the YouTube Thumbnail image loads
  • places the YouTube Thumbnail image in such a way that it looks like a 16:9 ratio video

I have enlarged the size of the play button. You can find font:100px and then decrease the font size value if you want the play button to be smaller as in the original code.

Things to note about the Play button

The major dilema is the Play button. If I go by the code given, the beautiful white play button with the stunning black shadow looks absolutely real, everything one could ask for. But, on older browsers and even updated Safari, it loads not a white play button, but a play emoji enlarged.

But if you use the Unicode play button code &#x25BA, instead, here's what happens on the new updated browsers.
If you want to use &#x25BA instead of ▶ then, the above thumbnail situation can happen in the latest browsers. 

Why use srcdoc and src both?

Wise people have commented there that IE does not recognize srcdoc and therefore to have compatibility for all browsers, we use still place src as a fallback option. Most browsers will give preference to srcdoc anyways.
However, while implementing this, I saw Mozilla, Edge working fine even before I added src in the code.

How to autoplay the YouTube embedded lazy load video after one click on thumbnail play button?

autoplay=1

Adding autoplay=1 to Youtube embedded video URL automatically makes it play after the intial one click on the YouTube thumnail of the video you just loaded.

Some have mentioned in the intial post that autoplay did not work for them in Mozilla. But I tested on Mozilla, Chrome, Edge, old browsers, mobile browsers, and it worked for me.

How to add lazy load youtube embed iframe video?

defer="true" async="true" loading="lazy"

Anyone who uses  bogger knows how horrific a sight it is to behold when you do a Google page insights on your website page load. iframe elements can have loading="lazy" in it. So, why not?

But since it is a blgger hosted website, might as well add all of it, so that it loads the YouTube embedded video player as lazily as it wants to. Doesn't affect performance at all. For example, doveranalyst videos page has atleast 10 playlists. It loads all of these video players, the YouTube javascript package any which way, whether or not, the user wants to see al off it, today!

I usuay add defer="true" async="true" loading="lazy" infront of all src attributes, img, iframe or not. But in this test, since youtube image thumbnails are our fallback option, I did not. My page load score went up to 60 from 30.

How to show only your videos in YouTube embedded video player?

Remove YouTube Video Suggestions in embedded videos

Remember this?
?rel=0;modestbranding=1;autoplay=1

For an embedded YouTube Video to not show any other youtubers' videos in suggestions, whenever your video is paused or ends, ?rel=0 at the end of the embed URL. 

?rel=0
So, it looks like this
https://www.youtube.com/embed/zxsj71PzpGU?rel=0

The suggestions shown will be only your own other videos from the youtube channel you're embedding. 

Complete code for embedding responsive YouTube video on Blogger that loads fast

Please read the parts of the code, and what they mean. You can remove parts you do not want.
<div class="doveranalyst-responsive-video"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen="allowfullscreen" class="responsive-iframe" defer="true" async="true"loading="lazy" title="doveranalyst movie vlog - Baahubali 2 best scenes"srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:100px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/29pmns0-AN4&rel=0;modestbranding=1;autoplay=1><img defer='true' async='true' loading='lazy'src=https://i3.ytimg.com/vi/29pmns0-AN4/hqdefault.jpg alt='video of doveranalyst- Baahubali 2 best scenes discussion><span>▶</span></a>" src="https://www.youtube.com/embed/29pmns0-AN4&rel=0;modestbranding=1"></iframe></div>

How to remove YouTube branding in embedded video player?

The part modestbranding=1 controls the YouTube brand not showing.
So, a URL 
https://www.youtube.com/embed/zxsj71PzpGU&rel=0;modestbranding=1 
will show only your videos and remove the YouTube logo, as if it is a self-hosted video on your website.

How to Load Youtube emdedded Playlists faster without video suggestions of other youtubers?

YouTube Playlist Embed -Blogger

Remember this?
&rel=0;modestbranding=1;autoplay=1

For a playlist you need to add the & after your YouTube Video embed URL instead of ?. 

&rel=0
So, it looks like this https://www.youtube.com/embed/zxsj71PzpGU&rel=0

Complete code for embedding a YouTube video Playlist on Blogger:

<div class="doveranalyst-responsive-video"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen="allowfullscreen" class="responsive-iframe" defer="true" async="true"loading="lazy"title="doveranalyst rj mrunmayee india vlogs - Indian youtuber"srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:100px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/videoseries?list=PLcsWIozKC0xzcCPoHAbnLi-KVEM7CpOKk&rel=0;modestbranding=1;autoplay=1><img defer='true' async='true' loading='lazy'src=https://i3.ytimg.com/vi/xAu5b18CD3U/hqdefault.jpg alt='doveranalyst rj mrunmayee indian youtuber radio jockey vlogs'><span>▶</span></a>" src="https://www.youtube.com/embed/videoseries?list=PLcsWIozKC0xzcCPoHAbnLi-KVEM7CpOKk&rel=0;modestbranding=1"></iframe></div>

How to embed responsive YouTube video on Blogger? 

You just need to put the whole YouTube iframe embed code inside a parent <div> and assign the below css in your template so that when you mention <div class="doveranalyst-responsive-video"> or whatever name you want to give say, you can change it to .youtube-responsive-video.

In layman/woman terms each time you paste a YouTube iframe embed code in your blog post, you have to make sure it is within a beginning and end div with class clearly mentioned (the class name shall be the name you mention below in css code).

<div class="doveranalyst-responsive-video"><iframe................></iframe></div>

Steps to add Responsive YouTube video embed Code css in Blogger Blogspot/custom Domain Theme

  1. Go to your blogger template.
  2. Take a Backup from the Theme section (just to safely roll back if you make any error.
  3. After downloading theme, open EDIT HTML, and CTRL+F </b:template-skin>
  4. Copy the below code just above 
]]>
      </b:template-skin>
    1. Do not miss the ]]> or for safety sake paste anywhere in the css or do Add Additional css from Customize Theme>Advanced. It should be there somewhere in your css after a } and before another css element begins.
    2. Use the div class always as explained when adding a new video.

    Responsive YouTube video embed Code & Responsive iframe code

    .doveranalyst-responsive-video{position:relative;width:100%;overflow:hidden;padding-top:56.25%}
    .responsive-iframe
    {position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}

    Here's thanking everyone's code I took and modified, and it worked for me, so I shared. If I could help you too, please, please do share a link to this blog post.

    © Copyright owned by Doveranalyst. This work cannot be reproduced without attribution. However, sharing a link would mean a lot to me! Thanks!

    Comment!

    Also ✅ post to facebook. Please donate to help support us creating more content. A subscription/ one-time payment will really help.paypal.me/doveranalyst or paytm

    Choose a recurring payment option from dropdown.

    Payment options INDIA in INR
    pay doveranalyst in Indian rupees
    Payment Options in USD
    paypal doveranalyst
    Find more posts on doveranalyst.com

    Get Amazon INDIA Prime membership

    or Audible here: