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!!
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.jpgBe sure to copy your own video id for which you want to load the thumbnail.
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
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 ►, instead, here's what happens on the new updated browsers.Why use srcdoc and src both?
How to autoplay the YouTube embedded lazy load video after one click on thumbnail play button?
autoplay=1Adding 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
?rel=0;modestbranding=1;autoplay=1For 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=0https://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
<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?
https://www.youtube.com/embed/zxsj71PzpGU&rel=0;modestbranding=1 How to Load Youtube emdedded Playlists faster without video suggestions of other youtubers?
YouTube Playlist Embed -Blogger
&rel=0;modestbranding=1;autoplay=1For a playlist you need to add the & after your YouTube Video embed URL instead of ?.
&rel=0So, 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
- Go to your blogger template.
- Take a Backup from the Theme section (just to safely roll back if you make any error.
- After downloading theme, open EDIT HTML, and CTRL+F </b:template-skin>
- Copy the below code just above
]]>
</b:template-skin>- 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.
- 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!
I am trying feed burner alternatives. Get your own 👉
Just bought this after lockdown. Super comfortable for daily wear.
This ring has survived for years! Cabin crew literally gasped, "Where did you get it from, Ma'am!"
Safe nail paints are very important when you're pregnant or cooking, for example, making a dough. We Indians love to eat with our hands too. Let's avoid some chemicals while we are at it.
