snippet for youtube embed (lazy-load)

youtube-embed-lazy.js

Array.from(document.querySelectorAll(".youtube")).forEach((el) => {
    el.addEventListener(
        "click",
        () => {
            const src = el.getAttribute("data-video");
            const newDiv = document.createElement("div");
            newDiv.classList.add("youtubeplay");
            newDiv.innerHTML = `<iframe loading="lazy" src="${src}" frameborder="0" width="560" height="315"></iframe>`;
            el.replaceWith(newDiv);
        },
        false
    );
});

youtube.css

.youtube img {
  height: 100%;
  object-fit: cover;
}
.youtube,
.youtubeplay {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 10px auto;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.youtube iframe,
.youtubeplay iframe {
  width: 100%;
  height: 100%;
}
.youtube::before {
  position: absolute;
  content: "Click to Play";
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  padding-top: 25%;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: all 0.3s;
}
.youtube:hover::before {
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  transition: all 0.3s;
}