【jQuery】「jquery.mb.YTPlayer」プラグインを使用してYouTube動画をWebサイトのメインビジュアルの背景に設定する方法

jQuery

ウェブデザインのトレンドは常に変わっていきますが、一つ注目すべき傾向として、動的で視覚的なコンテンツがウェブサイトにおけるユーザーのエンゲージメントを向上させることが挙げられます。

今日はその一環として、Webサイトの背景にYouTube動画を設定する方法を紹介します。

これにより、あなたのウェブサイトは一段と魅力的なビジュアル体験を提供し、訪問者を引きつけることができるでしょう。

手順は簡単で、プログラミング初心者でも実行できる内容です。それでは始めていきましょう！

実装方法

まずは、必要なスクリプトファイルをHTMLページに読み込みます。jQuery本体とjquery.mb.YTPlayerが必要です。
以下のコードをbodyの閉じタグ</body>の前に設置してください。

<!-- jQueryのスクリプトを読み込みます -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!-- jquery.mb.YTPlayerのスクリプトを読み込みます -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js" integrity="sha512-rVFx7vXgVV8cmgG7RsZNQ68CNBZ7GL3xTYl6GAVgl3iQiSwtuDjTeE1GESgPSCwkEn/ijFJyslZ1uzbN3smwYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

次に、HTML要素にYouTube動画のIDを設定します。ここではdiv要素を使用し、data-property属性に動画のURLや動画の設定をJSON形式で指定します。

<!-- YouTube動画を表示するためのdiv要素 -->
<div id="mainvisual">
  <div id="bgndVideo" class="player" data-property="{
    videoURL:'https://www.youtube.com/watch?v=YOUR_VIDEO_ID', // videoURL: 動画のURLまたはID
    containment:'#mainvisual', // containment: 動画を表示する要素を指定(親要素)
    autoPlay:true, // autoPlay: 動画の自動再生を指定
    mute:true, // mute: 動画のミュート設定を指定
    startAt:0, // startAt: 動画の開始秒数を指定
    opacity:1 // opacity: 動画の透明度を指定
  }"></div>
</div>

最後に、jquery.mb.YTPlayerを初期化します。これは、jQueryのドキュメント準備完了時（$(document).ready()）に行います。
以下のコードを最初に設置したjQuery本体とjquery.mb.YTPlayerの読み込み用コードの直後に設置してください。

<script>
  $(document).ready(function(){
    $("#bgndVideo").YTPlayer();
  });
</script>

これで、YouTube動画がdiv要素#mainvisualの背景として再生されるようになります。

オプション設定

data-property属性に指定するパラメータについて簡単に説明します。

  • videoURL: 動画のURLを指定します。YouTubeの動画URLの末尾にあるvパラメータが動画のIDです。
  • containment: 動画を表示する要素を指定します。ここでは親要素の’#mainvisual’を指定しています。
  • autoPlay: 動画の自動再生を指定します。trueを指定するとページ読み込み時に自動的に動画が再生されます。
  • mute: 動画のミュート設定を指定します。trueを指定すると動画は音声なしで再生されます。
  • startAt: 動画の開始秒数を指定します。0を指定すると動画の最初から再生されます。
  • opacity: 動画の透明度を指定します。1を指定すると完全に不透明になります。

まとめ

以上が、ウェブページの背景にYouTube動画を設定する方法の全てです。いかがでしょうか？わずかな手順で、あなたのウェブサイトは一段と魅力的なビジュアル体験を提供することが可能になります。動画を用いることで、従来の静的な背景よりも深い印象を訪問者に与え、長い時間サイトに留まってもらえる可能性が高まります。

忘れないでください、デザインはあくまで訪問者にとっての価値提供の一部であり、最終的にはコンテンツが王様です。背景動画はあくまでその一部であり、その上で価値ある情報を提供することが重要です。

それでは、あなたのウェブサイトが新たなビジュアル体験を通じて、訪問者に魅力的に映ることを願っています。次回の記事でも、皆さんに役立つ情報を提供できるよう頑張ります。ご覧いただきありがとうございました！