How to Install Embed Youtube Video Display on Blog SEO Super Responsive and User Friendly With Lazy Load Video? One way that we can do to take advantage of YouTube videos that will be installed on the content that we have. Of course it is also one of the strategies and ways to promote our YouTube videos.
But basically, maybe you often paste videos from YouTube or from your channel into websites or blogs, directly copy and paste from the YouTube video, actually when the video is loading, there is an iframe that will be loaded too, so it will be burdensome.
Then to overcome this, there are actually many ways, one of them is with the help of lazy load java script and of course this is very useful for the performance of our website when the video is inserted into the site we want.
Okay, without further ado, let's just take a look at How to attach or insert YouTube videos in the posts that we have so that they are responsive and automatically make the video user-friendly and lighter.
How to Install Script
1. The first step, please copy-paste the code below then open THEME > EDIT THEME, look for the code </body> CTRL+F to speed up the search, then please save it above the code </body>
<!--Start Script Lazy Load Video Youtube Responsive by TrickPk--> <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("TrickPk-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/ID/hqdefault.jpg".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> <!--End body Script Lazy Load Video Youtube Responsive by TrickPk-->
2. Then for the next step, please copy and paste the code below then save it in the code </b:skin> then save your theme
<!--Start CSS Lazy Load Video Youtube Responsive by TrickPk--> <style> .TrickPk-youtube-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .TrickPk-youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .TrickPk-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; } .TrickPk-youtube-player img:hover { -webkit-filter: brightness(75%); -moz-filter: brightness(75%); filter: brightness(75%); } .TrickPk-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> <!--Start CSS Lazy Load Video Youtube Responsive by TrickPk-->
How to use it on a Video?
Then how to install the video on an article that we want or on the Post page that we want, the method is as below
1. Copy-paste the code below then please change the video-id
<!-- HTML Start Youtube Lazy Load Video Responsive --> <div class="TrickPk-youtube-player" data-id="VIDEO_ID"></div> <!-- HTML End Youtube Lazy Load Video Responsive -->
2. Copy URL video youtube Video as
https://www.youtube.com/watch?v=dnmpzLnJqC8
3. Then the result is approximately as below
<div class="TrickPk-youtube-player" data-id="dnmpzLnJqC8">
Finally, Outcomes :
That's all for now what we can say about how to install YouTube videos on websites and blogs so that they are responsive and so that they load quickly and thank you for visiting, good luck trying it.