ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

videoタグにobject-fitプロパティが未指定の場合の挙動

スポンサーリンク

videoタグで動画を再生するWebページを作りました。
developer.mozilla.org

Webページを作ったのはいいのですが、なぜか動画の左右に空き(?)のような領域ができて、動画が再生されます。
動画の上下方向は、指定したサイズになっているようです。
高さと幅の指定を間違えたのかと確認しましたが、正しく指定していました。

動画を編集中
Photo by Wahid Khene on Unsplash

どうすれば動画が、指定した高さと幅で再生されるのかと調べたところ、object-fitプロパティの存在を知りました。
developer.mozilla.org

object-fitプロパティの初期値はfillで、動画の左右に空き(?)のような領域はできず、指定したサイズに合わせるはずですが、合っていません。
object-fitプロパティにcontainを指定したような動作になっています。

今回は、videoタグに、object-fitプロパティを追加して、coverを指定して対処しました。
coverであれば、縦横比が維持され、はみ出す場合はカットされるからです。


videoタグは、指定したサイズに自動で調整して、再生するものだと思っていました。
今回、videoタグは、フレーム内のコンテンツの一部としたために、このような現象が発生したのかもしれません。