CSSで動画をレスポンシブに対応させる方法

css

最近、スマホが主流になってきてyoutubeやVimeoなどの動画を埋め込むサイトやブログもよくみるこのごろなんですが、レスポンシブに対応していないので、動画の埋め込みに対応していない場合は、はみ出してしまうようです。

そしてネットで「動画 レスポンシブ　対応」で検索したら、出てきました（笑）というか同じ方法でしたので自分でも試してみました。

htmlファイルの準備

youtubeの場合は、動画上で右クリックすると「埋め込みコードをコピー」という項目があるので、コピーします。

貼り付けると分かりますが、youtubeのファイルはiframeで読み込まれるので、そいつを包むための親要素としてdivで括ってidかclass名をつけます。

今回は「video-wrap」というクラスを付けました。動画は取り合えずサッカーが好きなのでメッシのスーパープレイ集を埋め込みました。（笑）

CSS側の設定

CSSでは特に新しいプロパティなでは仕様していませんが、どのサイトもほとんどこの記述です。


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

親要素の設定

親要素の「video-wrap」では子要素であるiframeを絶対配置にするので基準値としてpositionをrelativeに設定しておきます。

どうやらpaddingの使って動画表示させているようです。数値を弄って試してみました
＊下記は勝手に思った事です。

padding-bottom:56.25%; padding-top:30px;
動画が表示される領域を調整するところ。数値が小さいと動画が欠けてしまう。 動画のタイトルが表示されている領域を確保する最小値。30px以下でも変わらず？

子要素側の設定

子要素であるiframe(embedやobjectは別の動画だったり要素の為の対応)ではpositionをabsoluteにして絶対配置にして、widthとheightともに100%を指定する必要があります。

参考サイト