Youtubeの情報をHPに埋め込む必要がでました。
その際の手続をまとめましたので、もしよければ参考にしていただければ幸いです。
意外にパラメータの意味を紹介しているページが少なかったので、自分で調べた結果を紹介したいと思います。
Youtubeの動画をリンクするのはすごく簡単
今回参考にした動画はGoogle公式チャンネルの動画を参考にしています
https://www.youtube.com/watch?v=dKEpq7YtfBs
執筆時点で東京オリンピックが開催していたのでこの動画を例に動きを確認したいと思います。
(将来東京オリンピックの評価はどうなっていますか？)
リンクさせたい動画を開き共有をクリック
共有の中から「埋め込む」をクリック
動画の埋め込みに表示されているコピーをクリックすると埋め込みのhtml情報がクリップされます。
あとはクリップされた情報を対象のページに貼り付けすればYoutubeのリンクさせることができます。
簡単です。
埋め込みたいhtmlやphpに対して貼り付ければリンクします。
特に難しい事は無いのでまず埋め込みたい場所にデフォルトで貼り付けテストをすれば動きがわかると思います
デフォルトで貼り付けると例えば、貼り付けた領域が大きいなどの問題が発生すると思います。
その時は以下のパラメータを変更することで対応することができます。
パラメータ
| width | 表示させるサムネイルの横幅のサイズ指定になります
例）width=”560” |
| height | 表示させるサムネイルの縦幅のサイズ指定になります
例）height=”240” |
| src | 動画のソースURLになります。いじらなくていいです |
| title | デフォルトはtitle="YouTube video player" となっているが、title内を変更しても変化が見られなかった。
デフォルトのままか、削除しても問題はなかった。 |
| frameborder | 外枠に線がある状態(フレーム)を表示非表示を制御することができます。
“0” 非表示 “1” 表示 例)frameborder="1" |
| loop | サムネイル上で繰り返したい時は指定します。
デフォルトは1なので1回しか再生されません 例)loop=2 |
| listTypeとlist | 既存のプレイリストの指定することができます
プレイリストがなくても次の動画のVIDEO-IDを指定すれば次の動画を再生させることができます。 ただし 例)src="https://www.youtube.com/embed/dKEpq7YtfBs?listType=playlist&list=PLLkq-mu9c_kY7J9hVDMrsjTU5Hd2uZz3U" |
| autoplay | ページロード後に自動で再生させることができる
muteと併用して使う事で有効化させる事ができる 例)src="https://www.youtube.com/embed/dKEpq7YtfBs?autoplay=1&mute=1" |
| mute | 再生時に音声をオフにさせることができます。
“0” 音声あり “1” 音声なし |
| rel | 再生終了後におすすめ動画を関連付けされた動画の表示をするかどうか設定
2018年9月25日以降非表示の設定ができなくなった "0" 関連なし "1" 関連あり |
| modestbranding | YouTubeのロゴの表示非表示の制御をすることができます。
例)src="https://www.youtube.com/embed/dKEpq7YtfBs?modestbranding=1” |
| allowfullscreen | フルスクリーンでの再生を許可するかどうか制御することができます。
スマホなどで見ることを考慮すると通常の使い方であれば入れておけばいいと思います。 例)allowfullscreen (単独で記入することで適用される |
allowパラメータ
ブラウザの機能の制限をするFeature Policyのパラメータになります
YouTubeの機能ではないので注意が必要です
詳しい解説は以下を参考にしていただきたいです。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Feature-Policy
わからない方はデフォルトのままでいいと思います。
表はデフォルトで設定されているパラメータの解説
| accelerometer | 端末の加速度に関する情報を収集するかどうか制御します。 |
| autoplay | インターフェイスがメディアの自動再生をリクエストすることを無効にするかどうかを制御します。 |
| clipboard-write | iframeによる不正または予期しない使用からクリップボードを保護します。
参考URL |
| encrypted-media | Encrypted Media Extensions (en-US) API (EME) を使用することを許可するかどうかを制御します |
| gyroscope | Gyroscope (en-US) インターフェイスを通じて、端末の方向に関する情報を収集することを許可するかどうかを制御します |
| picture-in-picture | Picture-in-Picture モードで動画を再生することを許可するかどうかを制御します。 |
サンプルコード
<iframe width="560" height="315" src="https://www.youtube.com/embed/dKEpq7YtfBs?modestbranding=1&autoplay=1&mute=1&rel=0&listType=playlist&list=PLLkq-mu9c_kY7J9hVDMrsjTU5Hd2uZz3U" playlist="XnSTfwI9cPo" title="YouTube video player" rel="0" frameborder="1" allow="accelerometer;autoplay;clipboard-write; encrypted-media; gyroscope;picture-in-picture;" allowfullscreen></iframe>
参考にしたサイト
https://developers.google.com/youtube/player_parameters?hl=ja
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Feature-Policy
https://chromestatus.com/features
最後に
いかがでしたか？
お役に立ちましたでしょうか？
今後もブログの方を更新していきますのでよろしくお願いします。
最後になりますが、もしよろしければ読者の皆様からご支援いただけるのであればご支援いただきたく思います。
Amazon欲しい物リストを公開していますので、ご支援よろしくお願いします。
www.amazon.jp
またTwitter、Youtubeもやっています。よければフォロー、チャンネル登録をお願いします。
Twitter: @whiteye8780
www.youtube.com
