YouTube Player APIとは
Webサイト内にYouTubeの動画をJavaScriptで追加できるAPI。
HTML内にiframeを貼り付ける埋め込みとは異なり、JavaScriptで特定の条件をif文で出し分けて表示させることもできます。
(日時によって表示させる動画を出し分けるなど)
YouTube Player APIの使い方
単純に動画を表示させるだけなら以下のHTMLとJavaScriptのコードを貼り付けるだけ。
「M7lc1UVf-VE」はYouTubeのURLのvideoIdです。
https://www.youtube.com/watch?v=M7lc1UVf-VE
1 | <div id="ytplayer"></div> |
1 2 3 4 5 6 7 8 9 | const script = document.createElement('script')script.src = 'https://www.youtube.com/player_api'document.head.appendChild(script)function onYouTubePlayerAPIReady() { new YT.Player('ytplayer', { videoId: 'M7lc1UVf-VE', })} |
YouTube動画はデフォルトだと640x360のサイズで表示されますが、以下のようにパラメーターを指定することでwidthとheightは変更可能です。
1 2 3 4 5 6 7 8 9 | function onYouTubePlayerAPIReady() { new YT.Player('ytplayer', { videoId: 'M7lc1UVf-VE', playerVars: { width: 1280, height: 720, }, })} |
YouTube Player APIの自動再生
YouTube動画を自動再生する場合は以下のようにplayerVarsプロパティを追加してautoplayとmuteを設定します。
1 2 3 4 5 6 7 8 9 | function onYouTubePlayerAPIReady() { new YT.Player('ytplayer', { videoId: 'M7lc1UVf-VE', playerVars: { autoplay: 1, mute: 1, }, })} |
自動再生は「autoplay: 1」だけでなく「mute: 1」も指定されていないと有効化されないので注意が必要です。
※ ただし、スマートフォン(iOS, Android)の場合はこの方法でも自動再生は不可です。
YouTube iframeのレスポンシブ対応
YouTubeのiframeは幅と高さが固定なので、そのままだとスマートフォンで見た際に表示領域からはみ出して表示されてしまいます。
レスポンシブWEBデザインに対応する場合は #ytplayer を #ytplayerWrap で囲んでCSSを以下のように指定してレスポンシブ対応にします。
1 2 3 | <div id="ytplayerWrap"> <div id="ytplayer"></div></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @media screen and (max-width: 640px) { #ytplayerWrap { position: relative; width: 100%; padding-top: 56.25%; } #ytplayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }} |
