最近は、釣りに関する動画ばかりみてしまうkaneです。
今回はYoutubeに関する内容を書いていきたいと思います。
サイト内に動画を埋め込みたい時ってあると思います。
特にYoutubeに投稿した動画をサイト内にプロモーションとして入れるなど。。
Youtubeなどを埋め込む場合は
<iframe src="https://www.youtube.com/embed/ID"></iframe>
ちなみにサムネイルを使いたい場合は
<img src="https://img.youtube.com/vi/ID/hqdefault.jpg">
を使います。
Youtubeで埋め込みコードを取得しよう
Youtubeに利用できる動画があることを前提として話を進めます。
まず始めに、Youtubeの動画ページへいきます。
動画の下にある、共有をクリックします。
次に埋め込みをクリックします。
ポップアップにあるiframeのコードか、下にあるコピーを押してクリップボードにコピーします。
このコードをWebサイトのコードへペーストするだけでYoutubeは表示されます。
実際の埋め込みが下になります。
「よし。埋め込みできたからよかったー」と思ったあなた！
ここからが、紹介したい機能ですよ！
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
https://developers.google.com/youtube/player_parameters?hl=ja
ここに掲載されているパラメーターを使うことで、色々なことができます。
基本的なパラメーターを使ってみよう
例えば
自動再生
パラメーター autoplay
<iframe src="https://www.youtube.com/embed/ID?autoplay=1"></iframe>
ループ再生
パラメーター roop=0&playlist=ID
<iframe src="https://www.youtube.com/embed/ID?loop=1&playlist=ID"></iframe>
動画下のコントローラーを消す
パラメーター controls
<iframe src="https://www.youtube.com/embed/ID?controls=0"></iframe>
キーボードによる操作制限
パラメーター disablekb
再生後キーボードによる制限
<iframe src="https://www.youtube.com/embed/ID?disablekb=1"></iframe>
指定の秒数で再生を止める
パラメーター end
<iframe src="https://www.youtube.com/embed/ID?end=10"></iframe>
フルスクリーン表示を消す
パラメーター fs
<iframe src="https://www.youtube.com/embed/ID?fs=0"></iframe>
パラメーターを繋げてみよう
記述方法は簡単です。
https://www.youtube.com/embed/ID?パラメーター&パラメーター&パラメーター
このように一番最初のパラメーターの先頭は「？」を置き、それ以降のパラメーター同士の間に「&」を入れるだけです。
下の動画は自動再生で10秒で止まりますが、繰り返し再生されます。
<iframe src="https://www.youtube.com/embed/ID?autoplay=1&loop=1&playlist=ID&end=10"></iframe>
まとめ
基本使いたいものに関しては、パラメーターが準備されているので、設定しやすいと思います。今回は基本使いそうなパラメーターだけでしたが、APIを利用するものだったりもあります。
今後機会があれば、その辺りも紹介できたらと思います。
細かな設定に方法は参考資料でもある
YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
https://developers.google.com/youtube/player_parameters?hl=ja
をご確認ください。
もし気になる方やYoutubeを設置してほしい、思うようにいかない方などいましたら株式会社あんどぷらすまでご連絡ください。
