Youtubeや動画の埋め込みをレスポンシブ対応する方法【コピペOK!】

おはようございます。特に買うものはないのに、足繁く博多駅に通っている社員Aです👩

最近はブログを朝・夜と2回更新しています。

こう見ると、早起きが得意で「朝活」と認識されそうですが、早起きは苦手なので、夜にまとめて書いて予約投稿しています。

さて、今回はYoutubeや動画をサイトに埋め込む際にレスポンシブ対応する方法を書いていきたいと思います。

<iframe>もしくは<video>タグを使って動画を埋め込むことが一般的だと思うのですが、ちょっとの工夫でタブレットやスマホで見たときも、縦横比を維持したままきれいにサイトに埋め込むことができます。

まずはサイトにYoutube・動画を埋め込む

まずは、HTMLでサイトにYoutubeもしくは動画を埋め込みます。

Youtubeの場合

埋め込みたい動画を、共有 > サイトに埋め込みで表示されるiframeをコピーし、下記のようにdivで囲ってからサイトに貼り付けます。

<div class="responsive_video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/○○○○" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

通常の動画の場合

サーバーなどに動画を予めアップロードし、下記のようにdivで囲ってからサイトに貼り付けます。

※動画をアップロードしたパスに合わせて書き換えが必要です。

<div class="responsive_video">
<video src="test.mp4"></video>
</div>

動画を埋め込んだら、CSSを追加

上記のままだと、どの端末から見ても指定した幅・高さで表示されてしまうので、タブレットやスマートフォンでははみ出す可能性があります。

下記のCSSを追加することで、どの端末から見ても縦横比を維持したまま表示できます。

.responsive_video { 
    position: relative; 
    padding-bottom: 56.25%; 
}
.responsive_video video, 
.responsive_video iframe, 
.responsive_video object, 
.responsive_video embed { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

実際に埋め込んだ動画を各端末で確認

【デスクトップPCから確認】

【iPadから確認】

【iPhone8から確認】

どの端末のサイズから見ても縦横比を維持したままきれいに表示できました。

まとめ

動画をレスポンシブで表示するには、この方法が一番簡単ですね。

videoタグやiframeを予めdivで覆っておくだけで可変にできるので、便利です。

サイトやブログにYoutubeや動画を貼り付けたいときに、参考になれば嬉しいです！

ちなみに画像もこの方法で縦横比を維持したまま表示できますよ♪ divで囲って、padding-topの数値を調整すると簡単に変えられます！