(36) 背景にYoutube動画を貼る

(1) やりたいこと

ページの背景(=任意の要素の背景)にYouTube動画を貼り付けたい。

(2) 実現方法

GitHubで公開されているこちらのスクリプトを使わせていただく。
jquery.mb.YTPlayer

出来上がったサンプルはこちら。
https://hp.dogrow.net/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) その他セレクタ: 任意のブロック要素

参考情報

jquery.mb.YTPlayer



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です