質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3889閲覧

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

gerick

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/12/26 02:10

下記サイトをのような参考サイトをいくつも見たのですが、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});

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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}

HTMLは質問で提示されたままです。JavaScriptは全部入れ替えました。
ただし、YouTube の iframe Player API を導入する必要があるので、以下のスクリプトを読み込んでください。
https://www.youtube.com/iframe_api

投稿2019/12/26 04:30

編集2019/12/26 10:27
Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gerick

2019/12/26 05:41

確認させていただきました!素晴らしいです!! このままでも十分なのですが、もし可能であれば上記に記載しているように、 再生ボタンをクリックしたらモーダル拡大して動画が流れるといった方法は難しいものなのでしょうか。。。? もし行けそうであればご教示いただけますとありがたいです! 宜しくお願いします。
Lhankor_Mhy

2019/12/26 05:54

できないこともないんじゃないかと思うのですが、別の方向からのアプローチになるので、お時間いただくことになるかと思います。
gerick

2019/12/26 06:06

わかりました!そこまで急ぎではないので、もう少しお待ちしておきます! ご回答ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問