1,642 views
この記事は最終更新から 2535日 が経過しています。
(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/