YouTube動画をWebサイトに埋め込み方法

YouTubeの動画を埋め込む方法はとても簡単です。
まずはYouTubeから埋め込みたい動画を探してきます。

動画はここから探す

YouTube

YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。

https://www.youtube.com/

埋め込みたい動画が見つかったら動画の再生ページを開いて動画プレイヤーの右下にある「共有」をクリックします。

共有を開いたら「埋め込む」をクリックしていきます。
恐らく一番左に表示されていると思います。

埋め込み用のコード（iframe要素）が表示されますのでサイト内の表示したい部分にコピペすれば表示されます。

これで表示はできますが、ただ張り付けただけだと大きさは560×315と設定されているので一切可変しないので少し工夫をしていきましょう

埋め込んだYoutubeをレスポンシブ対応させる方法

まずはコードを確認していきます。

ちょっと長いですが今回張り付けたコードは下記の通りです。

YouTubeの埋め込み用のコードは「iframe」という要素で出力しています
このiframeはInlineFrameの略で、文書内にフレームを作り、そこに別のHTMLなどのコンテンツを入れて配置できるタグです。 タグなのでcssを使って大きさも調整できます

幅の調整

例えば、iframeに対してこのような指定をしてみます。

上にあるように幅に関しては可変するようになりましたが、高さに関しては初期値の315pxのままになっています。
このままだとプレイヤー内に表示されている動画の一部が隠れた状態になり、すべてを表示できません。

高さの調整

続いて高さも調整していきます

高さも幅と同じように100％を指定をしてみると…

「height: 100%;」はもちろん「height: auto;」も現状はどちらもうまくいきません。

この現象はiframe要素で出力したHTML内の要素に「position: absolute;」が付いていて高さの情報がアイコン類と文字、余白分しか認識されていないためだと思われます。

結果現状では親要素に高さや余白の指定がない限り150pxで表示する状態になってしまってしまいました。

解決方法

この問題を解決するには高さを可変させられるようにする必要があります。
そのため、HTMLでiframe要素を囲むようにdiv要素を追加していきます。

ここでは分かりやすいようにclassを「youtube」としました

次はcssです。

YouTubeの埋め込み動画の幅が560pxの時に高さが315pxという初期設定を利用して、315は560の何％なのかを計算していきます。 計算式は 315 ÷ 560 × 100 = 56.25% なので高さに56.25%を指定すればオッケーということになります。

関連記事

paddingと%で高さを出す計算方法 ※レスポンシブ対応

youtubeなどのiframeを使った埋め込みコンテンツをレスポンシブ対応させる時に高さをpaddingで出すことは少なくないと思います。・・・。

先ほど追加したdiv要素に対して「padding-top」もしくは「padding-bottom」に設定します

これで幅が560pxの時に315pxの余白を要素の内側に可変する状態で付けることができましたのでiframe要素をpositionプロパティを使って.youtubeの左上に配置、高さを付けた余白と同じにしたいので100％にします。

これで埋め込んだYouTube動画のレスポンシブ対応か完了です。