HPの動画の横幅を小さくしたいです。ｍｐ４の動画をＨＰに埋め込んだのですが、動画の幅を調節したくて

解決済

質問者：hayosato
質問日時：2022/01/31 11:28
回答数：2件

HPの動画の横幅を小さくしたいです。
ｍｐ４の動画をＨＰに埋め込んだのですが、動画の幅を調節したくて、.test{の中にwidth:30px;を追加したのですが、幅の大きさが変化しません。

なぜでしょうか？
作成してアップロードした動画の元のサイズは７３６×４１４です。アスペクト比もちゃんと計算して黒帯も出ていません。

html
html lang="ja">

<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ビデオ調節</title>

<style>

.test{

text-align: center;
object-fit: fill;

}
</style>

</head>
<body>
<div class="test">
<video autoplay="" loop="" muted="" playsinline="" id="videosize">
<source src="kk.mp4" type="video/mp4">

</video>
</div>
</body>

</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2022/01/31 13:07

こんにちは

＞.test{の中にwidth:30px;を追加したのですが、幅の大きさが変化しません。
＞なぜでしょうか？
.testは包含要素なので、videoがオーバーフローしているだけでしょう。
（borderなどを設定して確認なさればわかると思います）

object-fitは置換要素に設定されるはずなので、ご提示の指定では効果はないはずです。
https://developer.mozilla.org/ja/docs/Web/CSS/ob …
とはいえ、Chromeでテストしてみた限りでは、video要素には効果がないように思われます。

一方で、サイズを指定したいだけなら、
　.test video{ width: 300px; }
などとしておけば、指定可能です。
（ただし、絶対値指定に限るようです）