Youtube動画をクリックでモーダル表示させたい。
YouTubeやVimeoのモーダル表示をjQueryプラグインのmodal-video.jsで手軽に実装する方法を解説します。
ヘッダーに記述
CDNで自社サイトへ読み込む
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/modal-video@2.4.6/css/modal-video.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/modal-video@2.4.6/js/jquery-modal-video.min.js"></script>JSファイルを作成-読み込み
ファイル名はyoutube_move.jsとしてみた。
<script src="/common/js/youtube_move.js"></script>—中身はこんな感じ——–
(function($) {
$(function () {
if ($(".js-modal-video").length) {
$(".js-modal-video").modalVideo({
channel: "youtube",
youtube: {
rel: 0, //関連動画の指定
autoplay: 1, //自動再生の指定
controls: 1, //コントロールさせるかどうかの指定
ratio: '9:16', // ビデオの比率を指定
loop: 1
},
});
}
});
})(jQuery);HTMLでボタンを設置
<a href="javascript:void(0);" data-video-id="n3i70PiOO2w" class="js-modal-video">動画で確認</a>「n3i70PiOO2w」は動画のID
CSS調整
スマホで縦撮影したもので、スマホで見ると小さくなるので縦長になるようCSSを追加する。
@media screen and (max-width: 640px) {
.modal-video-movie-wrap {
width: 100%;
height: 80%!important;/*ココで高さを指定、100%にすると閉じるボタンが見切れてしまうので80%くらがいが良いかも*/
}
}
CDNから読み込んでいるので「important;」で無理やり変更せいてる。