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サイト制作
-

関連記事

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで ...

スライドショーの画像を切り抜いたように表示する

よくあるスライドショーで 上だけ丸みを帯びていたり、波打っていたり、三角になっていたりと フレームの中でスライドショーが動いてるやつがやりたくて調べていたところ意外と簡単にできることがわかった。 次回 ...

no image

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

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

Atomエディタが便利です

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

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...