ifreamタグでMagnific Popupを使用し、オーバーレイして動画を拡大表示させたいです。

下記サイトをのような参考サイトをいくつも見たのですが、ifreamタグではなく全てaタグで実行されています。
https://gimmicklog.com/jquery/180/

以下のようにaタグではなくifreamタグの動画をMagnific Popupを使用し、オーバーレイして動画を拡大表示させることは可能でしょうか？
※イメージは下記参考サイトのような感じですが、再生ボタンをクリックしたらモーダル拡大して動画が流れるといった方法ができればと思っています。
https://chiyo-katsumasa.com/video/#

以下のファイルはダウンロードしてlinkおよびscriptで読み込み済みです。
・<link rel="stylesheet" href="../../kari/css/magnific-popup.css" />
・<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
・<script src="../../kari/js/jquery.magnific-popup.min.js"></script>

HTML
1<div class="movie">
2　<div class="line"><hr><hr></div>
3　　<h2>タイトル</h2>
4   <p class="note">※動画をクリックすると拡大します。</p>
5　　<ul class="movie_box">
6　　　<li>
7　　　　<iframe class="popup-iframe" width="100%" src="動画のURL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
8　　　　<div class="text">
9　　　　　<h3>サブタイトル ♯1</h3>
10　　　　　<p>コンテンツ内容</p>
11　　　　</div>
12　　　</li>
13　　　<li>
14　　　　<iframe class="popup-iframe" width="100%" src="動画のURL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
15　　　　<div class="text">
16　　　　　<h3>サブタイトル ♯2</h3>
17　　　　　<p>コンテンツ内容<br><br></p>
18　　　　</div>
19　　　</li>
20　　</ul>
21</div>

jQuery
1$(function(){
2  $('.popup-iframe').magnificPopup({
3    type: 'iframe',
4    disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
5    mainClass: 'mfp-fade',
6    removalDelay: 200,
7    preloader: false,
8    fixedContentPos: false
9  });
10});

よろしくお願い致します。

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

回答1件

ベストアンサー

やってみました。
サンプル

html
1<div class="wrapper" data-mfp-src="http://www.youtube.com/watch?v=M7lc1UVf-VE">
2  <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>
3</div>

css
1.wrapper{
2  position: relative;
3}
4.wrapper::after{
5  content: "";
6  display: block;
7  position: absolute;
8  width: 100%;
9  height: 100%;
10  top: 0;
11}

JavaScriptはご質問のコードをセレクタだけ.wrapperに変更して使っています。

内容的には、iframeを別の要素でラップして、CSSのafter疑似要素で上からかぶせているものです。
data-mfp-src属性については、公式のドキュメントを参照しました。
Including files | Magnific Popup Documentation
Iframe Type | Magnific Popup Documentation
ご不明の点がありましたら、コメントください。

コメントを受けて追記

YouTube限定になってしまいますが……
サンプル

html
1<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>

js
1function onYouTubeIframeAPIReady() {
2  $('.popup-iframe').each(function(i,e){
3    var id = "_" + i;
4    $(e).attr('id', id);
5    $(e).attr('src', $(e).attr('src') + '?enablejsapi=1');
6
7    new YT.Player(id, {
8      events: {
9         'onStateChange': onPlayerStateChange
10      }
11    });
12  });
13}
14
15function onPlayerStateChange(event) {
16  if (event.data == YT.PlayerState.PLAYING) {
17
18    event.target.stopVideo();
19
20    $.magnificPopup.open({
21      items: {
22        src: event.target.getIframe().src,
23      },
24      type: 'iframe',
25      iframe: {
26        markup: '<div class="mfp-iframe-scaler">'+
27                  '<div class="mfp-close"></div>'+
28                  '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
29                '</div>', 
30        patterns: {
31          youtube: {
32            index: 'youtube.com/',
33            id: function(url) { return url.split('?')[0].split('/embed/')[1]; },
34            src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
35          },
36        },
37      },
38    }, 0);
39
40  }
41}