WebサイトへYoutubeを埋め込む

最近は、釣りに関する動画ばかりみてしまう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の動画ページへいきます。
動画の下にある、共有をクリックします。

次に埋め込みをクリックします。

ポップアップにあるiframeのコードか、下にあるコピーを押してクリップボードにコピーします。

このコードをWebサイトのコードへペーストするだけでYoutubeは表示されます。
実際の埋め込みが下になります。

「よし。埋め込みできたからよかったー」と思ったあなた！
ここからが、紹介したい機能ですよ！

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
https://developers.google.com/youtube/player_parameters?hl=ja

ここに掲載されているパラメーターを使うことで、色々なことができます。

基本的なパラメーターを使ってみよう

例えば

<iframe src="https://www.youtube.com/embed/ID?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/ID?loop=1&playlist=ID"></iframe>

<iframe src="https://www.youtube.com/embed/ID?controls=0"></iframe>

<iframe src="https://www.youtube.com/embed/ID?disablekb=1"></iframe>

<iframe src="https://www.youtube.com/embed/ID?end=10"></iframe>

<iframe src="https://www.youtube.com/embed/ID?fs=0"></iframe>

パラメーターを繋げてみよう

<iframe src="https://www.youtube.com/embed/ID?autoplay=1&loop=1&playlist=ID&end=10"></iframe>

まとめ

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
https://developers.google.com/youtube/player_parameters?hl=ja

をご確認ください。
もし気になる方やYoutubeを設置してほしい、思うようにいかない方などいましたら株式会社あんどぷらすまでご連絡ください。

投稿者プロフィール

kane

脱肥満

最新の投稿

• html2020.09.16ブラウザごとの対応まとめ
• jQuery2020.08.25WP REST APIで記事を取得してみた
• web2019.10.17Instagram Graph APIの使い方
• css2019.09.27セレクトボックスを作ろう