Youtubeの埋め込みカスタマイズについて解説していきます。内容は下記の通りです。
- Youtubeの関連動画を制限する
- Youtubeの枠を角丸にする
- Youtubeの黒枠線を見えないようにする
- Youtubeの再生ボタンを作る・設置する
Youtubeの関連動画を制限する
HTMLやPHPにiframeタグでYoutubeを埋め込んだけど、関連動画を消せないというお悩みになっているでしょうか。
2018年9月まで、Youtubeの埋め込みタグに「rel=0」を入れるだけで関連動画を非表示にすることができていました。しかし、2018年10月以降に、Googleによる仕様変更により「関連動画を非表示にする」から「関連動画を同じチャンネルの動画に限定する」という機能に変更されました。
現時点では、関連動画を非表示にする機能はありません。しかし、IFrame Player APIというのを使って、埋め込みしたYoutubeの関連動画を制限する方法はあります。
制限ではなく非表示にしたい
非表示にする機能はないと言ったばかりですが、非表示にすることは可能です。厳密には、「非表示にする」という機能はないだけで、「関連動画を同じチャンネルの動画に限定する」という仕様を利用して、関連動画を非表示にすることができます。
その方法というのが、チャンネルにアップする動画を1つにして、Youtubeの埋め込みタグで関連動画の制限をかける、というものになります。
では、IFrame Player APIを使った埋め込みで、Youtubeの関連動画を制限する方法を説明していきます。
IFrame Player API とは
IFrame Player APIは、HTMLにYoutubeの動画を埋め込むためのAPIです。
APIじゃない簡単な方法として「静的なiframeタグを設置する」というものがありますが、このやり方だと「ただ埋め込む」だけで、例えば任意のボタンから動画を再生したり、途中から自動再生したりといった小回りの効いた設定をすることができません。
そこで、このAPIを使うと、そういうことができるということなんですよね。もちろん、今回ご紹介するYoutubeの関連動画を制限することもできます。具体的には、上記で紹介した静的にHTML上に設置していたiframeタグをjavascriptで動的に設置します。
ということで、iframeタグをjavscriptで動的に設置して、Youtubeの関連動画を制限するコードをご紹介します。コピペでおkです。
Youtubeの関連動画を制限する【コピペでおk】
Youtubeの関連動画を制限するコードがこちら。コピペして、埋め込みたいYoutubeのIDを変更すればおkです。
このチャンネルでは、1つの動画のみアップされているため、一時停止中と、再生後に関連動画は表示されません。
Youtubeのオプションを[playerVars]で設定することができて、「’rel’: 0」と設定することで関連動画を制限することができます。もし、[playerVars]の「’rel’: 0」を「’rel’: 1」にすると、チャンネル外の動画が関連動画として表示されるようになります。
Youtubeの枠を角丸にする
ここからは、Youtube埋め込みのカスタマイズあれこれです。
まずは、埋め込みYoutubeの枠を角丸にする方法を解説します。
CSSにたった1行[border-radius]を設定するだけです。
Youtubeの黒枠線を見えないようにする
Youtubeの枠を[border-radius]で角丸にした場合、Firefoxで、枠の外側に1pxくらいの黒線が見えてしまうことがあります。これは、埋め込まれたYoutubeのスタイルに[background-color: #000;]が設定されていることが原因となっています。
この問題が発生した場合の例として、下記のようにして対処することができます。
埋め込みYoutubeの上に、色をつけたボーダーを重ねます。
動画と同じ縦横幅にして、ボーダーの色をサムネイルの色や、背景色に合わせることで違和感なく黒線を見えなくすることができます。
ちなみに、埋め込みYoutubeに設定されてるスタイル[background-color: #000;]は、呼び出し先で設定されているタグとスタイルなので、こちら側で[background-color]の値を再設定することができません。そのため、上記のような対処をしています。
Youtubeの再生ボタンを作る・設置する
上記のような設定をした場合、Firefoxにて、Youtubeの再生ボタンが押せないことがあります。
その場合は、下記のようにボタンを設置することでYoutubeを再生できるようになります。
Youtubeの上に透明な図形（ボタン）を設置して、透明な図形（ボタン）を押した時にYoutubeのボタンと連携させることで、再生や一時停止ができるようにしています。HTMLの6行目、50-56行目がYoutubeのボタンに連携させるためのコードです。また、CSSでの設定も必要です。
まとめ
Youtubeの埋め込みカスタマイズについて、下記の内容を解説しました。
- Youtubeの関連動画を制限する
- Youtubeの枠を角丸にする
- Youtubeの黒枠線を見えないようにする
- Youtubeの再生ボタンを作る・設置する
仕事で上記のような依頼を受けたことがあったのでまとめました。やり方としては全然みっともない感じになっているので他に良い方法があると思いますが、暫定的にこれで対処できます。
こちらを参考に、良いやり方で実装してもらえればいいかなと思います。
▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ
