芝生やDIY等のライフハックやWeb制作情報を発信するメディア

【レスポンシブ対応】YouTube Player iframe APIで動画をモーダル再生する方法

Web2017年10月23日

iframe埋め込みを利用した、YouTube動画のモーダル再生方法は調べるといっぱい出てくるんですが、先日業務でiframe埋め込みではなくYouTube Player iframe APIを利用したモーダル再生を実装しました。備忘録も兼ねて本記事では、YouTube Player iframe APIによるモーダル動画の実装方法をご紹介させていただきたいと思います。

サンプルコード

js

$(function(){
    'use scrict';
    
    //プレイヤー変数
    var player;
	
    //オブジェクト生成
    function youtubeAPIInit() {
        var scriptTag = document.createElement('script');
        scriptTag.src = "https://www.youtube.com/iframe_api";
        var fsTag = document.getElementsByTagName('script')[0];
        fsTag.parentNode.insertBefore(scriptTag, fsTag);
        window.onYouTubeIframeAPIReady = function(){
            player = new YT.Player('player', {
                height:'540',
                width:'960',
                videoId:'236KUEBlXLE',
                playerVars:{
                    autohide:1,
                    controls:1,
                    modestbranding:1,
                    iv_load_policy:3,
                    showinfo:0,
                    rel:0,
                    autoplay:1
                }
            });
        };
    }

    //モーダル
    var modal = {}, $lay, $content;
    modal.inner = function() {
        if($("#modal-overlay")[0]) return false;
        $("body").append('<div id="modal-overlay"></div>');
        $lay = $("#modal-overlay");
        $content = $("#modal-content");
        $lay.fadeIn("slow");
        youtubeAPIInit();
        this.resize();
        $content.fadeIn("fast");
        $lay.unbind().click(function() {
            player.pauseVideo();
            $content.add($lay).fadeOut("fast",function(){
                $lay.remove();
            });
        });
    };
	
    //リサイズ処理
    modal.resize = function(){
        var $winWidth = $(window).width();
        var $winHeight = $(window).height();
        var $contentOuterWidth = $("#modal-content").outerWidth();
        var $contentOuterHeight = $("#modal-content").outerHeight();
        $("#modal-content").css({
            "left": (($winWidth - $contentOuterWidth) / 2) + "px",
            "top": (($winHeight - $contentOuterHeight) / 2) + "px"
        });
    }
	
    //クリック処理
    $("#modal-open").click(function(){
        modal.inner();
        player.playVideo();
    });
    $(window).resize(modal.resize);
});
  • ※jQueryを読み込んでいる場合のスクリプトとなります

css

#modal-content{
width:80%;
margin:0;
padding:0;
background:#fff;
position:fixed;
display:none ;
z-index:99999;
}

#modal-content .inner{
position:relative;
width:100%;
padding-top:56.25%;
overflow:hidden;
}

#modal-content .inner #player{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

#modal-overlay{
z-index:9999;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba( 0,0,0, 0.75 );
}

html

<div id="modal-content">
<div class="inner">
<div id="player"></div>
</div>
</div>

<ul class="list-link-01">
<li><a id="modal-open" class="button-link" href="#">モーダルで再生する</a></li>
</ul>

解説

あらかじめ、YouTubeをモーダル再生する場所（id="modal-content"以下）をhtmlに記述しておきます。

jsでは、まず変数playerを宣言します。これが動画オブジェクトの入れ物になります。

次に、オブジェクトを生成する関数youtubeAPIInitを用意します。これの記述の仕方はGoogleにリファレンスがあるのでそちらに倣って記述しています。

続いてモーダルの処理です。id="modal-overlay"が既にDOM上に存在している場合、処理は行いません。存在してなければモーダルを生成します。各要素を変数に格納し、ここで先ほど用意した関数youtubeAPIInitを実行します。$lay.unbind().click〜の記述にて、再生エリアの外をクリックした場合は一時停止しつつモーダルを非表示にします。さらに、この後用意するリサイズ処理も走らせることで、レスポンシブWebデザインに対応したモーダルを用意できるようにしています。

続いてリサイズの処理です。変数$winWidthと$winHeightにそれぞれ、ウインドウ全体の幅と高さを格納します。変数$contentOuterWidthと$contentOuterHeightにはモーダルの外の幅と高さを格納します。幅と高さ、それぞれを引き算してその半分の値をposition:leftの値として付与することで、レスポンシブに動画の天地中央再生を実現しています。

最後にモーダルを再生するためのクリック処理を記述します。ここではid="modal-open"をセレクタ指定し、モーダルを表示しつつplayer.playVideo();で再生するようにしています。ラスト1行は、リサイズ時にも前述のリサイズ処理を実行することで、リサイズ時もレイアウトが崩れないようにしています。

cssについてはあまり解説することがないのですが、.innerに「padding-top:56.25%;overflow:hidden;」を記述しているのがポイントで、これによりYouTube動画のレスポンシブWebデザインが可能になります。おまじないのようなものですね。#modal-overlayはモーダル動画の背景で、画面いっぱいに#000の色を透過75％で敷いています。

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

まとめ

iframe埋め込みの方が実装難易度としてはいくらか簡単ですが、YouTube Player iframe APIを使って実装するとパフォーマンスも良く、再生や停止をはじめとした動画のコントロールが全てjs側で制御できるようになるのでいいことづくしです。

モーダル再生する際はiframe埋め込みでの実装を行いがちですが、APIでも実はそこそこ容易に実装することが可能ですので、Webサイト上でのYouTube動画再生を実装される際はぜひ本記事をご参考にしていただければ幸いです。

「Web」の他の記事を読む

ページの先頭に戻る