実現したいこと
jQueryプラグイン「jquery.magnific-popup.js」とYouTube Data APIを用いて、以下を実装したいです。
・ブラウザが開くと数秒後に動画のポップアップが開き、自動再生される
・動画が終了したタイミングでポップアップが自動で閉じる
・※動画はいつでも閉じることができる
発生している問題・分からないこと
一応下記にて実現することはできました。
ただ、MacのSafariで確認すると動画が自動で再生されません。
また、他のブラウザでも時々自動再生できない、ポップアップが自動で閉じないなど、安定していません。
もしお手すきであれば、ご教示いただけると幸いです。
該当のソースコード
HTML
1 <a href="#movie01" class="movie-open"> 2 <div id="movie01" class="movie-content-wrap"> 3 <div id="movie-content01"></div> 4 </div> 5 </a>
CSS
1.movie-open {2 display: none;3 width: 80%;4 height: 450px;5}6.movie-content-wrap {7 position: relative;8 width: 100%;9 padding-top: 56.25%;10}11.movie-content-wrap iframe {12 position: absolute;13 top: 0;14 left: 0;15 width: 100%;16 height: 100%;17}
JavaScript
1// IFrame Player API の読み込み2let tag = document.createElement('script');3tag.src = "https://www.youtube.com/iframe_api";4let firstScriptTag = document.getElementsByTagName('script')[0];5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);6 7// YouTubeの埋め込み8let ytPlayer;9function onYouTubeIframeAPIReady() {10 ytPlayer = new YT.Player('movie-content01', {11 videoId: '読み込みたいYouTube動画のID',12 playerVars: {13 rel: 0, // 再生動画と同じチャンネルから関連動画を選択14 modestbranding: 1, // YouTubeロゴを表示しない15 },16 });17}18 19function onPlayerReady(event) {20 event.target.mute(); // 音声をミュートに21 event.target.playVideo(); // 動画再生22}23function onPlayerStateChange(event) {24 if (event.data == YT.PlayerState.ENDED) {25 $.magnificPopup.close();26 }27}28 29$(function() {30 31 setTimeout(function() {32 $('.movie-open').magnificPopup({33 type: 'inline',34 preloader: false,35 closeBtnInside: true,36 mainClass: 'mfp-fade',37 removalDelay: 7500,38 callbacks: {39 open: function() {40 new YT.Player('movie-content01', {41 events: {42 'onReady': onPlayerReady,43 'onStateChange': onPlayerStateChange 44 }45 });46 }47 }48 }).magnificPopup('open');49 }, 7500);50});
試したこと・調べたこと
上記の詳細・結果
▼再生終了後に自動でポップアップが閉じる参考
https://qiita.com/kinshist/items/9a824a07668cc6d7be39
※こちらはColorBox.jsです。
▼jquery.magnific-popup.jsで動画終了を検知する
https://stackoverflow.com/questions/29993448/detect-end-of-youtube-video-in-magnific-popup
補足
Macのバージョン:14.2.1
jQuery: 3.7.1

0 コメント