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

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

ただいまの
回答率

87.37%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,142

score 20

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

<div class="movie">
 <div class="line"><hr><hr></div>
  <h2>タイトル</h2>
   <p class="note">※動画をクリックすると拡大します。</p>
  <ul class="movie_box">
   <li>
    <iframe class="popup-iframe" width="100%" src="動画のURL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="text">
     <h3>サブタイトル ♯1</h3>
     <p>コンテンツ内容</p>
    </div>
   </li>
   <li>
    <iframe class="popup-iframe" width="100%" src="動画のURL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="text">
     <h3>サブタイトル ♯2</h3>
     <p>コンテンツ内容<br><br></p>
    </div>
   </li>
  </ul>
</div>
$(function(){
  $('.popup-iframe').magnificPopup({
    type: 'iframe',
    disableOn: 500, //ウィンドウ幅が500px以下だったらモーダル表示させずにリンク先へ遷移
    mainClass: 'mfp-fade',
    removalDelay: 200,
    preloader: false,
    fixedContentPos: false
  });
});


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

<div class="wrapper" data-mfp-src="http://www.youtube.com/watch?v=M7lc1UVf-VE">
  <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>
</div>
.wrapper{
  position: relative;
}
.wrapper::after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

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

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

コメントを受けて追記

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

<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>
function onYouTubeIframeAPIReady() {
  $('.popup-iframe').each(function(i,e){
    var id = "_" + i;
    $(e).attr('id', id);
    $(e).attr('src', $(e).attr('src') + '?enablejsapi=1');

    new YT.Player(id, {
      events: {
         'onStateChange': onPlayerStateChange
      }
    });
  });
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {

    event.target.stopVideo();

    $.magnificPopup.open({
      items: {
        src: event.target.getIframe().src,
      },
      type: 'iframe',
      iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
                  '<div class="mfp-close"></div>'+
                  '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '</div>', 
        patterns: {
          youtube: {
            index: 'youtube.com/',
            id: function(url) { return url.split('?')[0].split('/embed/')[1]; },
            src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
          },
        },
      },
    }, 0);

  }
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/26 14:41

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

    キャンセル

  • 2019/12/26 14:54

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

    キャンセル

  • 2019/12/26 15:06

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

    キャンセル

  • 2019/12/26 19:26

    追記しました。

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る