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アナリティクスタグは流用しないで下さい。