画面スクロールでYoutubeの埋め込みが範囲に入ったら再生する方法
カテゴリ：WEB制作
企業サイトや商品のブランドサイトなどを作成する際に動画の埋め込みを行うことは多くあります。ただ、ユーザーがなかなか動画の再生を行ってくれないというケースは多くあります。
その対策としてスクロールでYoutubeの埋め込みが表示されてから再生させることで動きを与えて目に止まる、見てもらえるといったものがあります。
今回はその方法を紹介します。
コードの紹介
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube自動再生</title>
<style>
/* スクロール用のスタイル */
body {
margin: 0;
font-family: Arial, sans-serif;
}
div {
height: 1180px;
width: 100%;
line-height: 1180px;
text-align: center;
}
.video-container {
background: #000;
padding: 60px 10px;
text-align: center;
}
iframe {
width: 100%;
max-width: 600px;
aspect-ratio: 16 / 9;
border: 0;
}
</style>
</head>
<body>
<div>
<p>スクロールしてください。</p>
</div>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/61JHONRXhjs?si=UMOChXK0b1_VxYKO"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const iframes = document.querySelectorAll("iframe");
const handleScroll = () => {
iframes.forEach((iframe) => {
const rect = iframe.getBoundingClientRect();
if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
const src = iframe.getAttribute("src");
if (!src.includes("autoplay=1")) {
const separator = src.includes("?") ? "&" : "?";
const newSrc = src + separator + "autoplay=1&mute=1";
iframe.setAttribute("src", newSrc);
}
}
});
};
handleScroll();
window.addEventListener("scroll", handleScroll);
});
</script>
</body>
</html>
コードを解説
HTMLの解説は割愛します。
JavaScript
読み込みが完了してから実行します。
document.addEventListener("DOMContentLoaded", function () {
});
iframeのタグを取得します。
const iframes = document.querySelectorAll("iframe");
スクロール位置の取得や自動再生をさせるための関数を書いていきます。
const handleScroll = () => {
};
取得した各iframe要素に対しての処理をループで実行させます。
iframes.forEach((iframe) => {
});
iframe要素の位置とサイズを取得します。
const rect = iframe.getBoundingClientRect();
getBoundingClientRect()では指定した要素のサイズとビューポートからの相対位置が取得できます。これをもとに画面内にYoutubeが全て表示された時点で再生されるようにします。
if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
}
iframeのsrc属性を取得してYoutubeのオプションの設定情報を取得します。
srcに’autoplay=1’が含まれていない場合のみ処理を実行します。
if (!src.includes("autoplay=1")) {
}
srcに既にクエリパラメータがあるかを確認し、適切なセパレーターを設定します。
const separator = src.includes("?") ? "&" : "?";
多くのブラウザでは、音声付き動画の自動再生が制限されています。
そのためmuteを追加して動画をミュート状態で再生することで自動再生ポリシーを回避します。
もしご自身でプログラムを作成していてYoutubeの自動再生ができない場合はミュート状態になっているかを確認してください。
const newSrc = src + separator + "autoplay=1&mute=1";
iframeのsrc属性を新しいURLに更新して自動再生を開始します。
iframe.setAttribute("src", newSrc);
スクロール以外にもページ読み込み時に一度だけ自動再生を実行します。
handleScroll();
ウィンドウのスクロールイベントが発生するたびにhandleScrollを実行します。
window.addEventListener("scroll", handleScroll);
まとめ
以上、『画面スクロールでYoutubeの埋め込みが範囲に入ったら再生する方法』でした。
スクロールでの自動再生はサイト制作においても多く発生しますので必要になったら参考にしてみてください。
