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

Copy Post HTML Code:

<!--[ Lazy youtube ]-->
<div class='ytShdw'>
  <div class='lazyYt' data-embed='Youtube_video_ID'>
    <div class='play'>
      <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
    </div>
  </div>
</div>

---

Lazy size iframe YouTube Video

Copy Post HTML Code:

<!--[ Lazysize iframe ]-->
<div class='ytShdw'>
  <div class='videoYt'>
    <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/Youtube_video_ID' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
  </div>
</div>

---

Lazy size iframe YouTube Playlist

Copy Post HTML Code:

<div class="ytShdw">
  <div class="videoYt">
    <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazy" data-src="//www.youtube.com/embed/videoseries?list=Your_Youtube_Playlist_ID" title="Lazy Iframe"></iframe>
  </div>
</div>

Music Player

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

Copy Post HTML Code:

<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "Image_Url_..../name.jpg",
      source: "Track/song/audio_url_here/name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "Image_Url_..../name.jpg",
      source: "Track/song/audio_url_here/name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "Image_Url_..../name.jpg",
      source: "Track/song/audio_url_here/name.mp3"

    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "Image_Url_..../name.jpg",
      source: "Track/song/audio_url_here/name.mp3"
    }
  ];
  /*]]>*/
</script>

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!

---