■ヘッダーに記述
・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ファイルを読み込む
<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);// JavaScript Document■HTMLでボタンを設置
<a href="javascript:void(0);" data-video-id="n3i70PiOO2w" class="js-modal-video">動画で確認</a>「n3i70PiOO2w」は、Youtube動画のID
■CSS調整
ショート動画が縦長でスマホで見ると小さくなるので縦長になるようCSSを追加する。
（なくても、Youtubeの右下の全画面ボタンを押せば全画面になる）
@media screen and (max-width: 640px) {
.modal-video-movie-wrap {
width: 100%;
height: 80%!important;/*ココで高さを指定、100%にすると閉じるボタンが見切れてしまうので80%くらがいが良い*/
position: relative;
padding-bottom: 56.25%;
background-color: #333;
animation-timing-function: ease-out;
animation-duration: .3s;
animation-name: modal-video-inner;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
-ms-transition: -ms-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
}