YouTubeファサードテスト

▶ 再生

以下のコードで実装

<div class="youtube-wrapper" data-id="動画ID">
  <picture>
    <source srcset="https://img.youtube.com/vi/動画ID/maxresdefault.jpg" type="image/webp">
    <img src="https://img.youtube.com/vi/動画ID/maxresdefault.jpg" 
         width="560" height="315"
         alt="動画サムネイル" 
         class="youtube-thumbnail">
  </picture>
  <button class="play-button">▶ 再生</button>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".youtube-wrapper").forEach(wrapper => {
      wrapper.addEventListener("click", function() {
        let iframe = document.createElement("iframe");
        iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1&rel=0");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "true");
        iframe.setAttribute("width", "1280");
        iframe.setAttribute("height", "720");
        this.innerHTML = "";
        this.appendChild(iframe);
      });
    });
  });
</script>