In today’s digital society, it’s more important than ever for businesses to have a presence online. With so many websites competing for users’ attention, it can be challenging to stand out from the crowd. A great way to do this is by establishing an online presence that helps users find you when they search for relevant keywords. With a blog, you can establish yourself as an authority on a certain subject and drive traffic back to your website. If your blog has a lot of images or videos, it might load slowly and turn some visitors away. That’s why you need to lazy load YouTube videos in your blog. Lazy loading is an asynchronous technique that delays the loading of resources until they are visible to the user. This post will teach you how to lazy load YouTube videos in a blogger with 5 quick and easy tips.
What is the reason to not use the blogger default Youtube iframe?
The default iframe in Blogger has a few limitations such as – it loads the embedded video as soon as the page loads, and it cannot be paused. These issues can affect the user experience and even cause the page to crash in some cases. The default iframe also has a tiny “Play” button at the bottom which can be easily missed, especially on mobile devices. This means that users need to tap the “Fullscreen” icon and then tap “Play” to watch the video. The default iframe also uses up your own bandwidth and server space, which can be expensive for high-traffic blogs. This is because the video gets pulled from YouTube’s server whenever a visitor loads your page.
The reason you should not use the default YouTube iframe is that it loads the entire video from YouTube’s servers. If you have a slow connection, it might take a really long time for the video to load. This is a bad user experience and will likely turn some people away from your blog. A better alternative is to load the video’s HTML source code from your own server and display it on your blog. This way, the video loads much more quickly because the data is being pulled from your own computer. You might have noticed that some blogs have a video that is just a static image that loads very quickly. This is an example of lazy loading a video in your blog. Lazy loading can significantly improve your blog’s loading speed and keep visitors engaged. It can also help you avoid getting a warning notice from Google.
How to lazyload Youtube Video in Blogger?
Step 1:- Open Your Blogger Dashboard and come to the Theme Section and Click on Edit HTML.
Step 2:- Now, Copy the Code Given Below and Paste it on Just Above the Closing </body> Tag.
<style>
.youtube-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 0px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player img {
object-fit: cover;
display: block;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: 0.4s all;
-moz-transition: 0.4s all;
transition: 0.4s all;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
-moz-filter: brightness(75%);
filter: brightness(75%);
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat;
cursor: pointer;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function labnolIframe(div) {
var iframe = document.createElement("iframe");
iframe.setAttribute(
"src",
"https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
);
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.setAttribute(
"allow",
"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
);
div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
var playerElements = document.getElementsByClassName("youtube-player");
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var div = document.createElement("div");
div.setAttribute("data-id", videoId);
var thumbNode = document.createElement("img");
thumbNode.src = "https://i.ytimg.com/vi_webp/ID/hqdefault.webp".replace(
"ID",
videoId
);
div.appendChild(thumbNode);
var playButton = document.createElement("div");
playButton.setAttribute("class", "play");
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}
document.addEventListener("DOMContentLoaded", initYouTubeVideos);
//]]>
</script></div>
Step 3:- Now, Open Your Blog Post Where You Want to LazyLoad YouTube.
Step 4:- Click on the Pencil icon Select Html View and Paste the below-given code.
<div class="youtube-player" data-id="VIDEO_ID"></div>
Step 5:- And Don't Forget to Replace the Video I'd (Replace with Your YouTube Video's Last part of the link).
We will be using YouTube Video Auto Thumbnail Poster to lazyload YouTube videos in blogger. Using this plugin you can get auto-generated thumbnail, title, and description which will help you to lazy load YouTube videos in blogger. The plugin has simple settings, where you can toggle the “Auto Posting” feature so that it doesn’t post the video title, description and thumbnail for every video you upload. You can also choose the video quality, select a category for the video and choose how many times it should be posted. You can also select which video to load if there are multiple videos available for a particular post.
Although there are different ways to lazy load a video, in this article, we’ll cover the best practices for lazy loading a YouTube video in Blogger. This process will only work if you use Blogger’s standard publishing platform and not the custom publishing platform. First, you’ll need to create a line of code that tells your browser to load the video when it is scrolled into view. This is called a “scrolling trigger” and is the first line of code that you’ll need to write.
You can do this by going to the “HTML” tab and then clicking on “Custom HTML”. Next, you’ll need to identify the URL of the YouTube video that you want to lazy load. This can be found by viewing your video on YouTube and clicking on the “Share” button in the top right. Then, select “Embed” and copy the URL that is shown in the text box. Next, you’ll want to replace the “scrolling trigger” line of code that you created with the actual video URL. You can paste the URL in between the “Start” and “End” tags. Lastly, you’ll want to wrap your video inside of a “div” tag. You can do this by clicking on the “DIV” tab and then pasting the video URL in between the “Start” and “End” tags.
How does Lazyload work on YouTube Videos?
As the name suggests, the main purpose of lazy loading is to delay the loading of certain elements until they are visible to the user. This can help to reduce the overall loading time of the page, which can be great for the user experience. When you load a video from YouTube, it is usually accompanied by several elements such as title text, author name, related video thumbnails, comments, etc. These elements are pulled from YouTube’s servers as well, which makes the page take longer to load. With lazy loading, you can make the page load faster by putting these elements behind a “loading” curtain. You can then “pull back the curtain” once the elements are visible to the reader, which makes the page experience much smoother.
Lazy loading works by only loading the initial portion of a video when a visitor first lands on your site. Then, as a visitor scrolls down your page, the rest of the video loads in the background. This allows the visitor to be able to see the first portion of the video without having to wait for the entire video to load.
Conclusion
Lazy loading is a great way to boost the loading speed of your site. It can also make your site more user-friendly by reducing the risk of “timing out” or crashing due to high amounts of traffic. With this technique, you can load only the necessary parts of the page and defer the loading of other content until it is required. This can be helpful in many ways, such as reducing the load time of your site, increasing the user experience, and increasing your site’s SEO.
Lazy loading a YouTube video can make a big difference in the loading speed of your blog. If you have a slow connection, it may take a long time for the video to load. This is a bad user experience and will likely turn some people away from your blog. A better alternative is to load the video’s HTML source code from your own server and display it on your blog. This way, the video loads much more quickly because the data is being pulled from your own computer. Lazy loading can significantly improve your blog’s loading speed and keep visitors engaged. It can also help you avoid getting a warning notice from Google.