ゆんつてっくゆんつてっくホームJavaScript「jquery.mb.YTPlayer」でYouTubeを背景にする2020/11/8ツイートシェアB!はてブポケットこんにちは、ゆんつです。YouTubeの動画を背景として利用したい場合。・jQueryのプラグインを使う方法などがあります。前回はCSSを使ってYouTubeを背景に設定しました。CSSでYouTubeを背景にする今回はjQueryのプラグイン「jquery.mb.YTPlayer」を使用してYouTubeを背景にしたいと思います。使いやすいプラグインですjquery.mb.YTPlayerの導入jquery.mb.YTPlayerの公式サイトにアクセスします。「Code」ボタンをクリック。ZIP」という項目をクリック。Zipファイルのダウンロードが始まるので、適当な場所にダウンロードして解凍します。解凍したフォルダのなかの「dist」というフォルダを開きます。そこにある「jquery.mb.YTPlayer.min.js」というファイルを使用します。これをHTMLがあるフォルダなどにコピーしておきます。HTMLの</body>タグの直前あたりで、まずjQuery本体を読み込み、そのあとにjquery.mb.YTPlayer.min.jsを読みます。src="jquery.mb.YTPlayer.min.js"></script>※上記はHTMLとjquery.mb.YTPlayer.min.jsが同じ階層に置かれている場合の書き方です。以上でjquery.mb.YTPlayer.min.jsの導入は完了です。jquery.mb.YTPlayerの基本的な使い方jquery.mb.YTPlayer.min.jsを使ってYouTubeを背景とする場合。背景に設定したい要素にdata-property属性を付与し、そこに各種プロパティを設定していきます。実際にコードを書いたものを見たほうがわかりやすいので、早速コードを書いてみます。$('#youtube').YTPlayer();});</script>YouTubeを背景に設定したい要素(#youtube)にdata-property属性を付与し動画をコントロールするためのプロパティを設定しています。動画のループミュートコントロールバー非表示YouTubeロゴ非表示です。最後にjQueryとjquery.mb.YTPlayer.min.jsを読み込ませ、jquery.mb.YTPlayer.min.jsを実行しています。jquery.mb.YTPlayer.min.jsの実行はYouTubeを背景にしたい要素のID名やクラス名などを選択して、.YTPlayer()を付けるだけ!ゆんつ簡単!CSSは以下のような感じ。relative;}以下にデモを用意したので、もしよかったら見てください。デモページを開くと音声ミュートで動画が自動再生され、コントロールバーやYouTubeのロゴなど余計なものは何も表示されないのが解ると思います。このようにYouTubeを背景にしたい要素にdata-property属性を付与してプロパティを設定し、その要素をjQueryで選択して.YTPlayer()を付けるというのが基本的な使い方です。使うプロパティdata-propertyに設定できる項目は公式ページに詳しく書かれていますが、僕がよく使うものだけ簡単に紹介しておきます。videoURL再生する動画のID又はURLを指定します。containmentここで指定した要素の直下にYouTubeが埋め込まれます。mutetrueにすると動画の音声がミュートになります。autoPlaytrueにすると動画が自動再生されます。loop1にすると動画がループしますstartAt動画の再生位置を設定します。opacity動画の透過度を0~1の間で設定します。showControlsこれをtrueに設定した場合。左上にこんな感じでアルファベットや数字が出ます。数字は「再生時間/動画全体の再生時間」が表示されており、各アルファベットは操作ボタンになっています。「P」は動画の再生・停止ボタン。「A」というの音声切り替えボタンで、Aになっているときは音が出ている状態で、一回クリックするとMになって音声がミュートになります。「O」をクリックすると動画が全画面表示になります。「Y」をクリックするとYouTubeのその動画のページにジャンプします。showControlsをfalseにすると、時間経過や動画操作のためのアルファベットは表示されません。showYTLogoshowControlsをtrueにしているときに、このshowYTLogoをfalseにすると「Y」のアルファベットが表示されなくなります。onReady動画が読み込まれた後に任意の関数が実行できます。動画が読み込まれて再生されるまでにはタイムラグがあり、再生までは白い画面が表示されます。そこでonReadyを使うことで動画が読み込まれるまではローディング画面を表示させて、動画が読み込まれたらローディング画面をフェードアウトさせるというような使い方ができます。先ほどの見てきたプロパティを使って、少し応用的な使い方をしてみます。});</script>先ほどの基本的なコードとの一番の違いはonReadyを使って動画が表示されるまではローディング画面が表示され、動画が始まるとそれがフェードアウトするようになったことです。startAtで動画を60秒から開始し、opacityを0.5にして動画を透過しています。CSSは以下のような感じで、ローディング画面をYouTubeが表示される画面にかぶせています。50px;}以下にデモを用意しましたので、もしよろしければご覧ください。デモデモサイトにアクセスするとまずローディング画面となり、そのあとに動画が始まると思います。動画は透過されて、やや白っぽくなっていると思います。このように、プロパティを使うことでもう少し凝った仕掛けの背景にすることができます。あとはタイトルなどを重ねるだけ以上のようにjquery.mb.YTPlayer.min.jsを使ってYouTubeを背景にしたら、あとはその背景の上に見出しなどの適切な要素を重ねれば良いだけです。簡単ですがYouTubeの背景にタイトルを重ねたデモを作成しました。デモとても使いやすいプラグインですというわけで、jquery.mb.YTPlayer.min.jsを使ったYouTube動画の背景化について見てきました。CSSでYouTubeを背景にすると再生ボタンや動画のタイトルなどが消せません。このプラグインを使うと、そういうものを簡単に非表示にすることができます。細かな部分までカスタマイズできるので、YouTubeを背景にする場合には僕はjquery.mb.YTPlayer.min.jsを使ったほうがいいんじゃないかなぁと思います。紹介した機能はほんの一例なので、もっと詳しく知りたい場合は公式サイトのWikiをご覧ください。左から右にゆっくりと文字を表示させるスイッチでコンテンツの背景色と文字色を変更する同じカテゴリの一覧へツイートシェアB!はてブポケットプロフィールゆんつと申します。コーディングやWordPress、プログラミングで実践した事について書いています。どこかの誰かに、又、自分で読み返したときに役立つ情報が書ければいいなと思います。このブログ以外にも「こんぷれ」という雑記ブログもやっているので、もしよかったらそっちも見てくれると嬉しいです。