Weblasts

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

タイトル通りYouTubeをWebサイトに埋め込むことは多いかと思います。
この記事ではYouTubeの埋め込み方法ときれいに拡大縮小させる方法を紹介していきます。

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

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

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

YouTubeの動画を埋め込む方法その1動画のぺージにある「共有」をクリック

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

YouTubeの動画を埋め込む方法その2複数表示されるアイコンの中にある「埋め込む」をクリック

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

YouTubeの動画を埋め込む方法その3埋め込み用の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%を指定すればオッケーということになります。

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

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

完成

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