カバーブロックの背景にYouTube動画を設定できないかと思い、方法を考えてみましたので参考までに。

1 jquery.mb.YTPlayer を利用する
- 1.1 「jquery.mb.YTPlayer」のダウンロード
- 1.2 テーマフォルダにアップロード
2 functions.php にコードを追記
3 カバーブロックに設定

jquery.mb.YTPlayer を利用する

JQueryプラグイン「JQuery.mb.YTPlayer」を使うととっても簡単に動画を背景にすることができます。

「jquery.mb.YTPlayer」のダウンロード

https://github.com/pupunzi/jquery.mb.YTPlayer

こちらの「 dist 」フォルダの「 jquery.mb.YTPlayer.min.js 」をダウンロードします。

テーマフォルダにアップロード

テーマフォルダの任意の場所にアップロードします。私は「 js 」というフォルダを作成してそちらにアップロードしました。

functions.php にコードを追記

「 jquery.mb.YTPlayer.min.js 」を使えるように functions.php にコードを追記します。

function ytplay_script() {
    wp_enqueue_script( 'ytp', get_stylesheet_directory_uri() . '/js/jquery.mb.YTPlayer.min.js', array( 'jquery' ), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'ytplay_script', 99);

尚、フロントページでのみ使用する場合は以下のように追記します。

function ytplay_script() {
    if ( is_front_page() ) {
        wp_enqueue_script( 'ytp', get_stylesheet_directory_uri() . '/js/jquery.mb.YTPlayer.min.js', array( 'jquery' ), '1.0.0', false );
    }
}
add_action( 'wp_enqueue_scripts', 'ytplay_script', 99);

カバーブロックに設定

まず、カバーブロックのHTMLアンカーに適当な名前を入力します。

ブロック内にカスタムHTMLを配置して、中身を以下のようにします。

<div id="ytPlayer" data-property="{
	videoURL: 'w-xhOvAaMgI',　//動画IDを記述
	containment: '#ytPlayerCover', //カバーに設定したHTMLアンカー
	autoPlay: true, //自動再生
	loop: 1,　//ループ再生
	mute: true, //
	startAt: 0, //動画の再生位置
	showControls: false, //コントロールの非表示
	showYTLogo: false //youtubeのロゴ等を非表示
}">
</div>
<script>jQuery("#ytPlayer").YTPlayer();</script>

サンプルがこちら https://etbs.jp/lp/sample05/

結構簡単に実装できますので試してみてください！上手く実装できない場合はオンラインでのサポートもお受けしていますのでご相談ください。

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ