Lazyload Youtube iFrame Free Source Code Using HTML, CSS and Javascript

Do you Looking for free source code for lazy-loaded YouTube iframes? You’ve come to the right place.

<div class="youtube-player" data-id="6TEYywSV4E4"></div>

  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0px;
  }
  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }
  .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;
  }
  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
    -moz-filter: brightness(75%);
    filter: brightness(75%);
  }
  .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;
  }

  //<![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("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);
  //]]>

✅ Full Parameter Summary

Parameter / Selector	Type	Used In	Purpose / Description
data-id	Attribute	HTML + JS	Holds the YouTube video ID (e.g. 6TEYywSV4E4). Used to construct iframe and thumbnail URLs.
class="youtube-player"	Class	HTML + CSS + JS	Identifies a div meant to lazy-load a YouTube video. Applies responsive ratio, style, and logic.
src (iframe)	Attribute	JS	URL of the embedded YouTube video: https://www.youtube.com/embed/[videoID]?autoplay=1&rel=0.
frameborder="0"	Attribute	JS	Removes default iframe border.
allowfullscreen="1"	Attribute	JS	Allows full-screen playback of the video.
allow="..."	Attribute	JS	Enables features like autoplay, encrypted media, gyroscope, picture-in-picture.
thumbNode.src	JavaScript	JS	Dynamically loads thumbnail image from YouTube: https://i.ytimg.com/vi/[videoID]/hqdefault.jpg.
.youtube-player iframe	CSS Selector	CSS	Styles the iframe to fill the entire player container.
.youtube-player img	CSS Selector	CSS	Styles the video thumbnail image with object-fit, centering, and transitions.
.youtube-player img:hover	CSS Selector	CSS	Adds hover effect (brightness(75%)) for user interaction feedback.
.youtube-player .play	CSS Selector	CSS	Play button overlay: centers it, uses a background icon, and enables click interaction.
position: relative	CSS Property	.youtube-player	Required for absolute positioning of internal iframe and play button.
padding-bottom: 56.25%	CSS Property	.youtube-player	Maintains a 16:9 aspect ratio for responsive layout.
position: absolute	CSS Property	.play, iframe	Allows centering and full-overlay behavior.
transition: 0.4s all	CSS Property	img	Smooth animation on hover effect.
background: #000	CSS Property	.youtube-player	Black background color before thumbnail loads.
background: url(...) no-repeat	CSS Property	.play	Displays YouTube play icon centered on the thumbnail.
onclick	JavaScript Event	JS	Triggers replacement of thumbnail with actual iframe on click.
DOMContentLoaded	JavaScript Event	JS	Ensures that video thumbnails are initialized only after the HTML DOM is fully loaded.

🔁 Optional Enhancements You Could Add

Feature	Parameter Example	Purpose
Custom Thumbnail	Replace hqdefault.jpg with custom URL	To use branded or high-res thumbnails
Mute Autoplay	?autoplay=1&mute=1	Autoplays without sound (useful for UX compliance)
Preload Iframes	loading="lazy"	Improve page load by deferring iframe loading