現在デフォルトスキンとして「Bizarre-food(ブルーカレー) 」適用中。近日同梱予定。

YouTube高速化埋め込みをパラメータで制御する方法

投稿・固定ページ
YouTube埋め込みプレイヤーの動作制御
この記事は約5分で読めます。

Cocoon 1.2.5から、YouTube動画の呼び出しをパラメータで制御出来るようにしました。

YouTube高速化埋め込みの詳細はこちら。

YouTube動画読み込みを高速化させる方法
YouTube動画を出来る限り軽く読み込む方法です。クリックすることでiframeに置き換わり動画が再生されます。

YouTubeパラメーター制御に関してはこちら。

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ  |  YouTube IFrame Player API  |  Google Developers

これにより、以下のようなことの制御ができるようになりました。

  • 関連動画を表示させるかどうか
  • 開始時間・終了時間の設定
  • プレイヤーコントロールを表示させるか
  • プレイヤーボタンなどの制御
この他にもいろいろ制御することができます。詳しくはYouTube埋め込みパラメーターを参照してください。
スポンサーリンク

埋め込みURLの指定例

YouTubeの埋め込み表示は、エディターに対して以下のようにURLを記入するだけです。

ビジュアルエディターでYouTube動画埋め込み

このURLに対してパラメーターを指定することで、YouTubeプレイヤーを制御することも可能になりました。

以下では、URLパラメーター指定のサンプルをいくつか紹介します。

関連動画を表示する

関連動画を表示するには、rel=1パラメータを付け加えてください。

URL https://www.youtube.com/watch?v=OEb-EVFQVG4&rel=1

実際の表示はこちら。

MICKEY THE TRUE ORIGINAL  これからも、ミッキーと一緒に。
Cocoonデフォルトでは、関連動画は非表示(rel=0)にしてあります。

プレイヤーを表示しない

パラメータで、controls=0を付け加えるとYouTubeプレイヤーが表示されなくなります。

URL https://www.youtube.com/watch?v=AoUxjQOQW7A&controls=0

実際の表示はこちら。

映画『アナと雪の女王』松たか子が歌う本編クリップ
非表示にすると音量調整とかもできないので、あまり訪問者に優しいとは言えないです。ただ、やろうと思えばできるということで。

開始・終了時間を設定する

開始時間はstart、終了時間はendで秒単位で指定します。このように複数パラメータで指定することも可能です。

URL https://www.youtube.com/watch?v=Fu3u0YAh1G8&start=10&end=20

実際の表示はこちら。

YouTube
開始・終了時間を指定して、見せたい箇所だけをすぐに見せることも可能です。

デフォルトのパラメーターを指定するサンプル

毎回パラメーターを設定するのが面倒くさいという場合は、youtube_embed_default_argsフックを利用することで、全てのYouTube高速化埋め込みに対してデフォルト値を設定できます。

子テーマのfunctions.phpに以下のようなコードを記述してパラメーターを指定することでデフォルト動作を変更することが可能です。

//YouTube高速化埋め込みのデフォルトパラメータを設定したい時
add_filter('youtube_embed_default_args', 'youtube_embed_default_args_custom');
function youtube_embed_default_args_custom($args){
  //デフォルトのパラメーターを記入
  //ここで記入したものは、URLで入力したパラメータで上書きされる
  $args['rel'] = 1;
  $args['controls'] = 0;
  $args['start'] = 3;
  $args['end'] = 10;
  return $args;
}
youtube_embed_default_argsで設定したパラメーターは、エディターで埋め込まれたパラメーターで上書きされます。これにより、個々のエディター埋め込みパラメーターで設定を変更することが可能です。

強制的にパラメーターを実行したい場合

寝込みURLパラメーターで指定したものを上書きする形で、強制的にパラメータを実行したい場合は、youtube_embed_argsフックを利用します。

設定を行う場合は、子テーマのfunctions.phpで以下のように書いて、パラメータを指定してください。

//YouTube高速化埋め込みの最終的なパラメータを設定したい時
add_filter('youtube_embed_args', 'youtube_embed_args_custom');
function youtube_embed_args_custom($args){
  //URLで入力したパラメーターも上書きできる
  $args['rel'] = 1;
  $args['controls'] = 0;
  $args['start'] = 3;
  $args['end'] = 10;
  return $args;
}

youtube_embed_argsで指定したものは、個々のエディター埋め込みパラメーターで設定したものより優先されます。「プレイヤーの呼び出し方法を変更したいけど記事をすべて編集するの面倒」といった場合に利用すると良いかと思います。

投稿・固定ページ
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年10ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:15年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:8ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント

タイトルとURLをコピーしました