How to add Youtube Video Player in Blogger post

How to add Youtube Player to a Blogger post

Here are a few steps

First Step 1. In this First Step, you can copy and paste the below code on your blog page and you can directly use it. It is autoplay and if you want to stop autoplay you can replace &autoplay=1&rel=0 with &rel=0 

<!-- code display starts --> <style> /*--------YT-Responsive--css------*/ .ytiframe{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .ytiframe iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; } /*---xxx-----YT--Responsive-css---xxxx----*/ </style> <div class="ytiframe"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="auto" src="https://www.youtube-nocookie.com/embed/VID-ID?&autoplay=1&rel=0" title="YouTube video player" width="100%"></iframe></div> <!-- code display ends -->

Simply paste the above code here 👇

Second Step 2a. In this Second step, you may directly copy and paste the CSS code inside your blogger them code board just above ]]></b:skin> 

<!-- code display starts --> <style> /*--------YT-Responsive--css------*/ .ytiframe{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .ytiframe iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; } /*---xxx-----YT--Responsive-css---xxxx----*/ </style> <!-- code display ends -->

Second Step 2b. In this Second step b, you may directly copy and paste the code on your blogger page where you want it to be displayed. It is autoplay and if you want to stop autoplay you can replace &autoplay=1&rel=0 with &rel=0  

<!-- code display starts --> <div class="ytiframe"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="auto" src="https://www.youtube-nocookie.com/embed/VID-ID?&autoplay=1&rel=0" title="YouTube video player" width="100%"></iframe></div> <!-- code display ends -->

Second Step 3. After all, you need to replace the VID-ID with the Youtube ID as below

Conclusion.  I suggest you follow the Second Step rather than the First Step because the First Step will weigh the page and will increase loading time while the Second Step will smoothen page loading.