15

More than 5 years have passed since last update.

Video要素の縦横比を変更する

Last updated at 2016-10-23Posted at 2016-10-23

検証環境

Chrome 54.0.2840.59

問題点

Video要素のwidth, heightを変更しても要素の縦横比がキープされた状態で大きさが変更されてしまうため、Video要素は縦横比を変えることが出来ない。グーグル先生は解決方法を教えてくれない（と、ある勉強会で聞いた）

原因

Video要素のobject-fitがデフォルトでcontainになっている。
※Image要素とかは、fill

解決方法

object-fit: fillを指定する。

video {
    object-fit: fill;
    width: 75%;
}

解決方法２

transformでも一応大丈夫そう

video {
    transform: scale(0.75, 1);
}

グーグル先生向け

アスペクト比変わらない　width height

15

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

15