Blogging Community

https://www.success-trending.club - Embedding a YouTube video is very easy. You open the video on YouTube, click Share and then Embed. And then you include this code on your blog or website. Although embedding a YouTube video this way is simple, you'd be shocked to know how much a single YouTube video embed can bring down the performance of your web pages. According to labnol.org, the browser must download approximately 800 kB of data just to render the YouTube video player. Even before the visitor clicks the play button, these files are downloaded.LazyLoading YouTube Video Embed Technique has many benefits in terms of significantly improving website speed and performance. It is very important to know how to implement it and embed Youtube videos on your website the right way.How to implement lazy loading on your blog or website?There are quite a lot of plugins on the internet that does this task. You can use any plugin. But remember plugins are sometimes stuffed with unnecessary code which may take away the performance benefit.Here is Step by step method on how to lazyload Embed youtube player on your blog or website with a very lite pure JavaScript and CSS code.Whether you are a website owner or blogger you would definitely require this type of embedding if you wish to increase your website or blog speed. .panel-container{margin:50px 25px}.popup{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .popup .popuptext{visibility:hidden;width:160px;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:8px 0;position:absolute;z-index:1;bottom:125%;left:50%;} .popup .popuptext::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 transparent transparent transparent} .popup .show{visibility:visible;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}} Get Lazyload Youtube Video Embed Code Install the CSS and JS CodeCopy the CSS Code and Paste it in Head Section of the webpage or theme. You just have to do this step once..video-container {background-color: #000;margin-bottom: 30px;position: relative;padding-top: 56.25%;overflow: hidden;cursor: pointer;color:white;} .video-container img {width: 100%;top: -16.82%;left: 0;opacity: 0.7;} .video-container .play-button {width: 90px;height: 60px;background-color: red;box-shadow: 0 0 30px rgba( 0,0,0,0.6 );z-index: 1;opacity: 0.8;border-radius: 6px;} .video-container .play-button:before {content: "";border-style: solid;border-width: 15px 0 15px 26.0px;border-color: transparent transparent transparent #fff;} .video-container img,.video-container .play-button {cursor: pointer;} .video-container img,.video-container iframe,.video-container .play-button,.video-container .play-button:before {position: absolute;} .video-container .play-button,.video-container .play-button:before {top: 50%;left: 50%;transform: translate3d( -50%, -50%, 0 );} .video-container iframe {height: 100%;width: 100%;top: 0;left: 0;} .video-container .loading {position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} .loading .loader {border: 5px solid grey; border-top: 5px solid #ffffff; border-radius: 50%;width: 60px;height: 60px;animation: spin 2s linear infinite;} @keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }} Copy the javascript Code and Paste it just before the </body> tag of the page or theme. You just have to do this step once. var youtube = document.querySelectorAll( ".video-container" ); if(youtube.length>0){ for (var i = 0; i < youtube.length; i++) { var playbutton = youtube[i].innerHTML = ""; var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/hqdefault.jpg"; var image = new Image(); image.src = source; image.addEventListener( "load", function() { youtube[ i ].appendChild( image ); }( i ) ); youtube[i].addEventListener( "click", function() { this.innerHTML = ""; var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "allow", "autoplay" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.appendChild( iframe ); } );};} Get Your Embed CodeGet the URL of the video you want to embed and paste it here. Click Get Embed Code button. Get Embed Code Copy the Embed Code and paste it in HTML where you want the video to appear.Embed Code Copied!CopyPowered by www.success-trending.club$('#getlinkbtn').on('click', function(){ var newval = '', $this = $('#sharelink'); if (newval = $this.val().match(/(\?|&)v=([^&#]+)/)) { $('#downloadlink').val(''); } else if (newval = $this.val().match(/(\.be\/)+([^\/]+)/)) { $('#downloadlink').val(''); } else if (newval = $this.val().match(/(\embed\/)+([^\/]+)/)) { $('#downloadlink').val(''); } $('#copylinkbtn').prop('disabled', false); }); function copylink(){ var e=document.getElementById("downloadlink"); e.select();e.setSelectionRange(0,99999);document.execCommand("copy"); document.getElementById("myPopup").classList.toggle("show"); } var link = document.createElement('link'); link.rel = "stylesheet"; link.type = "text/css"; link.href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"; document.head.appendChild(link); How does LazyLoad Youtube Video Embed works?The term lazyload also known as 'On-demand loading' is an optimization technique for online content.Under this technique, a lazy loading JavaScript actually fetches and displays a thumbnail image of the Youtube video rather than the actual video itself. When a user presses the play button, the thumbnail image is replaced with a conventional YouTube video player with autoplay set to 1, which allows the video to play almost instantaneously. The main benefit is that the extra YouTube JavaScript is only loaded if someone chooses to watch the embedded video and not if they do.This technique increases the website speed significantly.DEMOThe two main advantages of lazy load YouTube video embed codeFirstly, it does not increase page size substantially. Not only does the embedded YouTube video increase the byte size of your web pages, but it also requires the browser to make additional HTTP calls in order to render the video player. This slows down your page's overall loading time, lowering its page speed and lowering its core vitals score. However, by using the lazy load technique you can easily avoid these problems. Lazyload YouTube video embed can save almost an MB in terms of the download of each video.Secondly, The IFRAME tag is used in the standard YouTube embed code to fix the width and height of the video player, rendering it non-responsive.The Lazyload YouTube Video Embed Code or the on-demand embed code is responsive, adjusting the player dimensions dynamically based on the visitor's screen size.Taking inspiration from the original script on labnol.org, I have tweaked the code to improve its performance and also to give it a better user experience.And the app above makes it very easy to install and generate the lazy load embed code.I would appreciate it if you link back to this page in case you find the script useful in your projects.