2,142 views
この記事は最終更新から 2879日 が経過しています。
(1) やりたいこと
ページの背景（＝任意の要素の背景）にYouTube動画を貼り付けたい。
(2) 実現方法
GitHubで公開されているこちらのスクリプトを使わせていただく。
jquery.mb.YTPlayer
出来上がったサンプルはこちら。
https://www.dogrow.net/hp/sample/00036
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./jquery.mb.YTPlayer.min.js"></script>
<link rel="stylesheet" href="./css/jquery.mb.YTPlayer.min.css" />
<script>
$(document).ready(function(){
$("#bgYT").YTPlayer();
});
</script>
</head>
<body>
<div id="bgYT" data-property="{
videoURL: 'joZmOrknpRE',
containment: 'body',
autoPlay: true,
loop: true,
mute: true,
startAt: 0,
opacity: 1,
showControls: false,
showYTLogo: false
}"></div>
</body>
</html>
(3) オプション指定
videoURL
Youtube動画のURL（IDだけでも可）
startAt
Youtube動画の再生開始位置を秒単位で指定する。
containment
動画を貼り付ける要素を指定する。
1) self: 自分自身
2) body: bodyタグ
3) その他セレクタ: 任意のブロック要素
参考情報
https://tech.jastin.net/jquery-mb-ytplayer/
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2026-01-24: 0回 2026-01-23: 0回 2026-01-22: 0回 2026-01-21: 0回 2026-01-20: 0回 2026-01-19: 0回 2026-01-18: 0回