JAVA / jQuery

【jQuary / js】ホームページやブログでYouTubeをポップアップさせるプラグイン【modal-video.js】

  /

CDN読み込み準備　<head></head>に

<!-- modal-video.jsのcss -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/modal-video@2.4.6/css/modal-video.min.css"/>
<!-- jQuery本体 -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- modal-video.jsのjs -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/modal-video@2.4.6/js/jquery-modal-video.min.js"></script>

 

HTML（ページの表示部分に）

<!-- aタグ使用 -->
<a href="javascript:void(0);" data-video-id="SUMPLE" class="js-modal-video">サムネイルなど</a>

<!-- aタグ以外を使用 -->
<div data-video-id="SUMPLE" class="js-modal-video">サムネイルなど</div>

 

footer.phpに

<script>	
$(function () {
  if ($(".js-modal-video").length) {
    $(".js-modal-video").modalVideo({
      channel: "youtube",
      youtube: {
        controls: 1, // コントロール表示（0は非表示）
      },
    });
  }
});
</script>
RELATED POST