JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/231822

by Lhankor_Mhy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<script src="https://www.youtube.com/iframe_api"></script>
<div class="movie">
  <div class="line"><hr><hr></div>
    <h2>タイトル</h2>
   <p class="note">※動画をクリックすると拡大します。</p>
    <ul class="movie_box">
      <li>
        <iframe class="popup-iframe" width="100%" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="text">
          <h3>サブタイトル ♯1</h3>
          <p>コンテンツ内容</p>
        </div>
      </li>
      <li>
        <iframe class="popup-iframe" width="100%" src="https://www.youtube.com/embed/60E7gcJLcE0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <div class="text">
          <h3>サブタイトル ♯2</h3>
          <p>コンテンツ内容</p>
        </div>
      </li>
    </ul>
</div>

JavaScript

function onYouTubeIframeAPIReady() {
  $('.popup-iframe').each(function(i,e){
    var id = "_" + i;
    $(e).attr('id', id);
    $(e).attr('src', $(e).attr('src') + '?enablejsapi=1');

    new YT.Player(id, {
      events: {
         'onStateChange': onPlayerStateChange
      }
    });
  });
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {

    event.target.stopVideo();

    $.magnificPopup.open({
      items: {
        src: event.target.getIframe().src,
      },
      type: 'iframe',
      iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
                  '<div class="mfp-close"></div>'+
                  '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>', 
        patterns: {
          youtube: {
            index: 'youtube.com/',
            id: function(url) { return url.split('?')[0].split('/embed/')[1]; },
            src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
          },
        },
      },
    }, 0);

  }
}