Webサイト制作

投稿日:2024年4月3日 更新日:

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

やりたいこと

Videoファイルが横長で見にくいので縦幅を調整したい

原因

Video要素のobject-fitがデフォルトでcontainになっている。
object-fit:fill;を指定してあげる

対策

対策1

video{ 
object-fit: fill;
height:440px;
}

対策2

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

問題点

対策1は、ページに表示しているときは問題ないが、動画を拡大して見たときにobject-fit:fillが受け継がれているので間延びして見えてしまう。
対策2は、動画を拡大しても問題ない。

- Webサイト制作
-

関連記事

no image

角丸テーブルのスタイル指定

時々使うテーブルの角丸仕様、毎回調べてる気がする。。 ポイントはborder-collapse border-collapse: collapse;ではなくborder-collapse: separ ...

Atomエディタが便利です

目次1 今まで使っていたのはDreamWeaver2 おすすめのパッケージ2.1 メニューを日本語化[japanese-menu]2.2 タグが簡単に書ける[emmet]2.3 FTP接続するなら[r ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 目次1 まずはHTMLでメニュー作成2 スタイル ...

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 目次1 まずはhtml2 cssを追加します。3 テキストの背景指定も まずはhtml 何でもいいので適当なクラスか何かあた ...