クリックしてからYouTube動画を読み込む
ページの表示速度改善はSEO対策のひとつとして有効ですが、
YouTube動画をページに埋め込んでいる場合、読み込みに時間がかかり、スコアに影響してしまったりします。
そこで、ページ読み込み時に同時にYouTubeも読み込むのではなく、
サムネイル(もしくは再生)をクリックして初めて動画が読み込まれるようにしようと思ったよってやーつ。
HTML
<a class="youtubeMovie" href="javascript:void(0);" onclick="ytClick();" id="movie" data-mvnum="1">
<span class="btn-ytplay"></span>
<img src="サムネイル画像" alt="">
</a>
JS
var ytPlayer = [], ytPlaying, ytStop, ytPlay;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function ytClick(){
ytPlayer = new YT.Player('movie',{
controls: 0,
disablekb: 0,
iv_load_policy: 3,
modestbranding: 1,
rel: 0,
showinfo: 0,
videoId: '【埋め込むYouTubeのID】',
playerVars: {
autoplay: 1,
playsinline: 1
},
events: {
"onReady": onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
CSS
.youtubeMovie {
display: block;
position: relative;
margin: 50px auto 0;
}
.youtubeMovie img {
box-shadow: none;
border-radius: 0;
}
.youtubeMovie .btn-ytplay {
position: absolute;
left: 50%;
top: 50%;
width: 68px;
height: 48px;
margin-left: -34px;
margin-top: -24px;
z-index: 1;
}
.youtubeMovie .btn-ytplay::before, .youtubeMovie .btn-ytplay::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.youtubeMovie .btn-ytplay::before {
width: 100%;
height: 100%;
background: #212121;
border-radius: 10px;
transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
opacity: .8;
}
.youtubeMovie .btn-ytplay::after {
left: calc(50% + 8px);
border: 10px solid transparent;
border-left: 18px solid #fff;
}
.youtubeMovie:hover .btn-ytplay::before {
background: #f00;
opacity: 1;
}
.youtubeMovie:hover img {
opacity: .9 !important;
}
@media screen and (max-width: 767px) {
.youtubeMovie {
margin: 12px auto 0;
height: calc((100vw - 30px) * .56);
}
}
