2020.12.28  2021.04.04

jQueryプラグイン、YTPlayerを使ってyoutubeを背景動画にする方法

皆さんこんにちは!マコブログです!

今回は、YTPlayerというjqueryプラグインを使用して、
サイト内にyoutube動画を埋め込む方法を紹介していきたいと思います。

実装する

まずは、jqueryを読み込みましょう。
※最近では脱jQueryとも言われてきていますので、YTPlayerではない方法をを探さないといけないかもしれませんね…

jQueryを読み込んだ直後に、YTPlayerをCDNで読み込みましょう。
※「CDNとは」:CDNはだれもが簡単に外部ファイルを読み込める物です。

cdn.jsという公開ファイルが検索できる便利なサイトがありますので、そちらで探してみましょう。
https://cdnjs.com/libraries/jquery.mb.YTPlayer

参考コード

下記が読み込みの参考コードになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.8/jquery.mb.YTPlayer.min.js" integrity="sha512-jI/qyLWsZ9Tk0zrPfJgRFV5f0E/jGboe1Ellx881310LBvxDuKY5QX71GnBivDmBpsW12Wcrqrg48wN5/x3mjQ==" crossorigin="anonymous"></script>

次にhtml、JavaScriptの設定ですね。


コード例

<div class="ytp-lay">
  <div class="lay-bg">
    <div class="movie yt-player" id="js-yt-player" data-property="{videoURL: 'URLを記述',containment: 'self',autoPlay: true,loop: true,mute: true,opacity: 1,anchor: 'center,center',showControls: false,stopMovieOnBlur: false,optimizeDisplay: false,showYTLogo: false,}"></div>
  </div>
</div>

※videoURLには該当するyoutubeチャンネルのIDを記入しましょう。

if ($('#js-yt-player')[0]) {
//js-yt-playerコンテナを検出したら実行
$('#js-yt-player').YTPlayer()
}

これで完了です。


※追記 2020年12月現在

ytpplayerの古いバージョンがMAC等で再生できないというトラブルが発生している様です。
ユーザーエージェントの出し方が変わってしまい、ライブラリのUA判定部分がうまく動かなくなったことが原因だそうです。

公式GIT https://github.com/pupunzi/jquery.mb.YTPlayer/releases

CDNでは最新バージョンの3.3.8以降の物を呼び出すと良いでしょう。

それでは!今回は、ここまで!
最後までご覧いただきありがとうございます!
また次回の記事で!

こちらの記事も是非チェックしてみてください↓
swiper.jsページネーションの背景画像をスライド画像と連携させる方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →