Blogger/Website Lazy YouTube Video, Playlist and Music Player Embed HTML Code

Blogger/Website Lazy YouTube Video, Playlist and Music Player Embed HTML Code

---

Lazy YouTube Video

Useful to delay loading Youtube videos after user scrolls the page

Lazy YouTube Embed HTML Code:

<!--[ Lazy YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

---

Lazy Load Responsive YouTube

Lazy Load Responsive YouTube Embed HTML Code:

<div class="yt-lazy">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    loading="lazy"
    allowfullscreen>
  </iframe>
</div>

Lazy Load Responsive YouTube Embed Style HTML Code:

<style>
.yt-lazy {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.yt-lazy iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

---

Lazy size iframe YouTube Playlist

Lazy size iframe YouTube Playlist Embed HTML Code:

<div class='embed-container'>
    <iframe 
        src="https://www.youtube.com/embed/videoseries?list=PLHegy7IBJOpskDl7tx2oXLatOgU9XnA_T"
        frameborder="0"
        allowfullscreen
    ></iframe>
</div>

Lazy size iframe YouTube Playlist Style HTML Code:

<style>
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio ke liye */
    height: 0; 
    overflow: hidden; 
    max-width: 100%; 
} 
.embed-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
</style>

Music Player

Music Player that can be used to play songs using audio files, i.e. MP3.

code

Note: I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box or you can  Contact Us. Thank you!

---