【jQueryプラグイン】【YouTube Data API】MacのSafariで動画が自動で開始されない

実現したいこと

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});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

▼再生終了後に自動でポップアップが閉じる参考
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

行動規範の内容に同意します

回答1件

ベストアンサー

自動再生やポップアップの安定性の問題は、ブラウザの方針や制約によるものがあります。特に、自動再生の動画やポップアップ広告は、多くのブラウザで制限される傾向があります。しかし、いくつかの改善点がありますので、試してみてください。

自動再生の問題: 自動再生がブラウザの方針によってブロックされる可能性があります。これを克服するために、ユーザーのインタラクション（クリックなど）があった後に再生するように変更することができます。例えば、ユーザーがポップアップを開くことをクリックした後に再生を開始します。

ポップアップが自動で閉じない問題: onPlayerStateChangeコールバック内のポップアップを閉じる処理が正常に動作していないようです。こちらもブラウザの制約が影響している可能性があります。ポップアップを閉じる処理を改善する必要があります。

$(function() {
    $('.movie-open').magnificPopup({
        type: 'inline',
        preloader: false,
        closeBtnInside: true,
        mainClass: 'mfp-fade',
        removalDelay: 7500,
        callbacks: {
            open: function() {
                new YT.Player('movie-content01', {
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }
        }
    });

    // クリックされたらポップアップを開く
    $('.movie-open').click(function() {
        $('.movie-open').magnificPopup('open');
    });
});

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        $.magnificPopup.close();
    }
}

これにより、ユーザーのインタラクションに基づいてポップアップが開き、動画が再生されるようになると思います。また、動画が終了したらポップアップが自動で閉じるはずです

投稿2024/02/09 00:27