Magnific-Popupを利用してYoutubeをポップアップで表示させるとエラーが出ます。

いつもお世話になっております。

Youtubeリンクをクリックするとポップアップ（モーダル）表示されるというUIを実装しようとしています。

実際にYoutubeをリンクさせてクリックするとポップアップはするのですが
「エラーが発生しました。しばらくしてからもう一度お試しください。（再生 ID: XXXXXXXXXXXXXX）
詳細」
というエラーが出てしまいます。

html
1<html>
2<head>
3    <meta charset="UTF-8">
4    <meta name="viewport" content="width=device-width,initial-scale=1.0">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
7    <link rel="stylesheet" href="../../inc/js/magnificpopup/magnific-popup.css">
8    <title>タイトル</title>
9</head>
10<body ontouchstart="" cz-shortcut-listen="true">
11    <main id="Movie_Page">
12        <p>リード文</p>
13        <div id="Tab_Wrap">
14             <div id="wrapper">
15                 <a class="popup-iframe" href="https://www.youtube.com/embed/OPauW7PW_fg">YouTube動画</a>
16             </div>
17        </div>
18    </main>
19
20    <!--jQuery CDN-->
21    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
22    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
23    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
24    <script src="../../inc/js/magnificpopup/jquery.magnific-popup.min.js"></script>
25    <script>
26        $(function() {
27            $('.popup-iframe').magnificPopup({
28                type: 'iframe',
29                disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
30                mainClass: 'mfp-fade',
31                removalDelay: 200,
32                preloader: false,
33                fixedContentPos: false
34            });
35        });
36
37    </script>
38</body>
39</html>
40

##試したこと

・埋め込みコード
→再生されたので動画に問題があるわけではない

html
1<iframe width="560" height="315" src="https://www.youtube.com/embed/OPauW7PW_fg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

・ブラウザの変更/キャッシュクリア
→効果なし

以上、宜しくお願い致します。

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

回答1件

自己解決

<a class="popup-iframe" href="https://www.youtube.com/embed/OPauW7PW_fg">YouTube動画</a>
を
<a class="popup-iframe" href="https://www.youtube.com/watch?v=OPauW7PW_fg">YouTube動画</a>
に変更したところ解決しました。

投稿2020/05/26 04:50

samiA

総合スコア13