2022年8月4日URLをコピーしました!最近、サイトの背景にYoutubeなどの動画を入れるのが流行っているようです。今回はjQueryのプラグインを利用してYouTubeの動画を背景に埋め込み、ループ再生する方法をご紹介します。背景に動画を埋め込む方法は、HTML5のvideoタグの出現が大きく影響していると思いますが、videoタグで動画ファイルを読み込むのではありません。目次jquery.mb.YTPlayer使用するのは「jquery.mb.YTPlayer」というjQueryのプラグインです。pages!GitHubはこちら。backgr...プラグインを読み込むダウンロード先のリンクも貼りましたが、いつも通りJavaScriptをCDNで読み込みます。src="//cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.1.5/jquery.mb.YTPlayer.min.js"></script><script>$(function(){$("#bgndVideo").YTPlayer();});</script>背景に動画を表示させるHTMLタグに上記で指定したidを入力し、data-propertyにオプションを書きます。CodePen.オプションについてvideoURLの動画URLとcontainmentの表示したい場所は必ず設定すること。showControlsでYouTubeコントローラを非表示にしています。他はデフォルトで問題ないと思います。情報が古いみたいですが、オプションはこちらをご参照ください。数値(0~1)jquery.mb.YTPlayerのオプション一覧バージョンアップしてオプションが増えたようなので、もっと知りたい方は本家のドキュメント(英語)をご覧ください。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。