Bootstrap4のmodalでYouTubeの動画を表示
Bootstrapでサイトを作ってて「BootstrapのモーダルウィンドウでYouTube表示できたら便利じゃね？」ということで調べてみました
処理的にはモーダル表示ボタンのクリックでfunction作ってモーダル内のiframeのYouTubeの埋め込みコードを渡してあげるだけの簡単なものです
しかしこの場合モーダル閉じても再生が停止しないので閉じたときの処理も加えてあげます
まずはモーダルでYouTube再生
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg video" data-video="【YouTubeの埋め込みコードのsrc属性】" data-toggle="modal" data-target="#videoModal">
Launch Youtube video
</button>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="100%" height="500" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
$(function() {
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', '');
});
});
});
説明
HTMLのモーダルを展開するボタンにdata属性で「data-video」を作ります
ここにYouTubeの埋め込みコードのsrc属性を設定しておきます
この「data-video」をボタンクリック時にモーダル内のiframeにあるsrc属性に設定することでYouTubeの埋め込みプレイヤーを表示します
「videoSRCauto」変数で自動再生等の設定が入れてありますが、単純に表示させたいだけならこの行を削除し
$(theModal + ' iframe').attr('src', videoSRCauto);
を
$(theModal + ' iframe').attr('src', videoSRC);
にしても動きます
モーダルウィンドウのセンター配置
こちらもjQueryでセンター配置にします
$(function() {
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $(".modal" + ':visible');
}
$modals.each( function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top);
});
}
// modal表示時
$(".modal").on('show.bs.modal', function(e) {
centerModals($(this));
});
// windowリサイズ時
$(window).on('resize', centerModals);
});
モーダル閉じたら再生を停止
停止の方法ですが何通りかありまして、一番ポピュラーなのはpostMessageで停止する方法です
参考サイト
ですが上記の方法だとモーダルを複数動画で使いまわしたい時に不便なので
今回はiframeのsrc属性内にあるYouTube埋め込みコードを削除するという強引な方法で停止します
$(function() {
$('#videoModal').on('hidden.bs.modal', function() {
var $this = $(this).find('iframe'),
$this.attr('src', "");
});
});
「hidden.bs.modal」はモーダルが完全に隠された時に起動します
その際にモーダルウィンドウ内のiframe（今回は「#videoModal」内）のsrc属性を空にしてやることで再生を停止します
ちょっと強引でスマートじゃないですが、ページ内に複数のモーダル展開ボタンを設置しても問題なく動作します
まとめ
「そんなに使うことなくね？ライブラリもあるし」
と思ったのですがせっかく作ったので公開しておきます
wordpressなら便利なプラグインもあるのでなおさら使わないと思いますがご参考まで
参考サイト
modal-video-full.html
modalの上下センタリング
Twitter Bootstrap Modal stop Youtube video
コメント