背景でYouTube動画をループ再生するjQueryプラグイン「jquery.mb.YTPlayer」

jquery-mb-ytplayer
  • URLをコピーしました!

最近、サイトの背景Youtubeなどの動画を入れるのが流行っているようです。
今回はjQueryプラグインを利用してYouTube動画背景に埋め込み、ループ再生する方法をご紹介します。
背景動画埋め込む方法は、HTML5videoタグの出現が大きく影響していると思いますが、videoタグで動画ファイルを読み込むのではありません。

目次

jquery.mb.YTPlayer

使用するのは「jquery.mb.YTPlayer」というjQueryプラグインです。
公式サイトはこちら。

Matteo Bicocchi
All my artworks - Matteo Bicocchi I'm a creative dreamer in all directions. Artworks, paintings, drawings, videos, photos. Born in Florence, Italy in 1968.

GitHubはこちら。

GitHub
GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery ... use a custom yutube player for a video as background on jQuery framework - pupunzi/jquery.mb.YTPlayer

プラグインを読み込む

ダウンロード先のリンクも貼りましたが、いつも通りJavaScriptCDNで読み込みます。

cdnjs
jquery.mb.YTPlayer - Libraries - cdnjs - The #1 free and open source CDN built to make life easier f... This plugin let you play any public YouTube video as background of your page. It can also be used as a customized player in page. - Simple. Fast. Reliable. Cont...

背景に動画を表示させる

HTMLタグに上記で指定したidを入力し、data-propertyにオプションを書きます。

jquery.mb.YTPlayerのサンプル

See the Pen jquery.mb.YTPlayer by JaSTIN (@JaSTIN) on CodePen.

オプションについて

videoURL動画URLcontainmentの表示したい場所は必ず設定すること。
showControlsYouTubeコントローラを非表示にしています。
他はデフォルトで問題ないと思います。
ちょっと情報が古いみたいですが、オプションはこちらをご参照ください。

プロパティ内容初期値パラメータ
videoURL表示するYouTubeのURL(短縮 , ID可) URL
containment背景にYouTubeを表示する要素(’select’で自身)‘body’jQuery セレクタ / ‘selef’
mute音声オフfalsetrue / false
vol音量(muteがfalse時のみ) 数値(1~100)
showControlsYouTubeコントローラtruetrue / false
loopループ回数truetrue / false / 数値
align配置‘center,center’下図参照
startAt開始点0数値(秒で指定)
stopAt停止点(0で最後まで)0数値(秒で指定)
quality品質‘default’‘default’ / ‘small’ / ‘medium’ / ‘large’ / ‘hd720’ / ‘hd1080’ / ‘highres’
autoPlay自動再生truetrue / false
addRasterラスターイメージの表示falsetrue / false
opacity透過度1数値(0~1)
jquery.mb.YTPlayerのオプション一覧

バージョンアップしてオプションが増えたようなので、もっと知りたい方は本家のドキュメント(英語)をご覧ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次