videoをbackground-size:coverのように表示する

16:9のvideo要素をbackground-position:center 0;background-size:cover;のように表示する方法。

常時は横幅100%で高さは成り行き表示にしておいて、メディアクエリのmax-aspect-ratioで16:9未満になった場合に、天地100%の横幅成り行きにする。

その時に、left:50%; transform:translateX(-50%);でセンタリングをするのがミソ。

video {
position: fixed;
width: 100%;
height: auto;
z-index: 0;
}
@media (max-aspect-ratio: 16/9) {
video {
width: auto;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}

ファイル・ロケーション: TIPS

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です