slick.jsを使ってmp4とYouTube動画をスライド表示する方法をご紹介します。
mp4とYouTube動画なのでスマホにも対応出来ますが、iPhoneのsafariは動画の自動再生はされないです。
Contents
ディスプレイ広告
slick.jsを使ってmp4とYouTube動画をスライド表示するCSS記述
※CDNのslick.css、slick-theme.cssファイルを読み込みます。スライドエリア(.slider)とドットインジケーター(.slick-dots)等のCSS記述です。必要に応じて変更して下さい。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"> <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 22px; line-height: 2em; padding-bottom: 20px; } .slider{ margin: 0; padding: 0; width: 100%; opacity: 0; transition: 3s; } .slick-initialized{ opacity: 1 } .slider img, .slider video, .sliderBox iframe{ width: 100%; height: auto; } .slick-slide li{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .slick-slide iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slick-dots{ bottom: 30px; } .slick-dots li button{ width: 40px; height: 40px; } .slick-dots li button:before { line-height: 40px; width: 40px; height: 40px; opacity: 1; color: #ffffff; font-size: 16px; } .slick-dots li.slick-active button:before { opacity: 1; color: #000000; } </style>
slick.jsを使ってmp4とYouTube動画をスライド表示するHTML記述
※スライド表示させる動画(tree.mp4)とYouTube動画出力先(id=”youtube”)を用意します。
<h1>slick.jsを使ってmp4とYouTube動画をスライド表示</h1> <ul class="slider"> <li> <video autoplay loop muted poster="https://dad-union.com/demo/js/20230209-covervid/tree.jpg"> <source src="https://dad-union.com/demo/js/20230209-covervid/tree.mp4" type="video/mp4"> </video> </li> <li><div id="youtube"></div></li> </ul>
slick.jsを使ってmp4とYouTube動画をスライド表示するJavaScriptの記述
※jquery-2.1.4.min.js、slick.jsファイルを読み込みます。YouTube動画APIの「https://www.youtube.com/iframe_api」をscriptタグとして読み込みます。$(‘スライド表示エリア’).slick({オプション})、function onYouTubeIframeAPIReady() {出力先エリア,{YouTube動画表示オプション}})を記述します。YouTube動画表示オプションでは動画IDやコントローラー、タイトル表示等の設定を行います。
<script src="jquery-2.1.4.min.js"></script> <script src="slick.js"></script> <script src="https://www.youtube.com/iframe_api"></script> <script> //slick $('.slider').slick({ autoplay:true, autoplaySpeed:5000, dots:true, lazyLoad:"progressive", //画像の遅延読み込み arrows:false, pauseOnHover:false }); //YouTube function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player( 'youtube', // 出力先タグid { videoId: 'P7Od94ikeoI', // YouTube動画ID playerVars: { height: '100%', width: '100%', loop: 1, playlist: 'P7Od94ikeoI', controls: 0,//コントローラー無 autoplay: 1, showinfo: 0,//動画タイトル非表示 rel: 0,//関連動画制御 iv_load_policy: 3,//動画アノテーション start: 30 //スタート秒数 }, events: { 'onReady': onPlayerReady } } ); } //準備完了 function onPlayerReady(event) { event.target.playVideo(); event.target.mute(); } </script>
slick.jsでmp4とYouTube動画をスライド表示するデモページ
slick.jsでmp4とYouTube動画をスライド表示するデモページ
参考にさせていただいたサイト
スマホOK!スライダーにYouTubeなど自動再生動画を使う方法(slick.js)
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。