css ,videotタグ。ホームページに動画を埋め込んだのですが、左右に黒帯ができてしまいます。こ

解決済

質問者：hayosato
質問日時：2022/01/25 11:11
回答数：4件

css ,videotタグ。ホームページに動画を埋め込んだのですが、左右に黒帯ができてしまいます。この黒帯を無くしたいです。

ソースコードは下にあります。object-fit: fill;でも治りません。

動画は元は1280×720サイズで作成し、ホームページ用にサイズを小さくしてｍｐ４に書き出しました。1280×720から896×414に変更、アスペクト比１６：９でＯＫ。

1280×720の時は黒帯はでませんが、サイズを896×414に変更してアップロードすると黒帯が出てしまいます。
動画編集ソフトで書き出しする時アスペクト比は自動で16:9になるので間違ってないと思います。付属画像参考

●実際のホームページのＵＲＬは以下です
（何故かアクセス制限が出て見れなかもしれませんので、ソースコードと付属画像も下に提示してます。）
https://rensyuu.s205.xrea.com/rensyuu12.tokyo/PH …

★参考にしたサイト動画の大きさ（デバイス別とアスペクト比）の参考サイト

https://www.somethingfun.co.jp/video_tips/movie_ …

★ソースコードは以下です。

<!DOCTYPE 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="hgh.mp4" type="video/mp4">

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

</html>

通報する

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

質問の本文を隠す

回答 (4件)

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

No.2ベストアンサー

回答者： fujillin
回答日時：2022/01/25 11:42

こんにちは

1280×720のサイズはアスペクト比を保てば、736×414になるはずです。
896×414のサイズにした時点で、両サイドに黒色が挿入されていませんか？

mp4ファイルを直接表示してみて、確認なさってみてはいかがでしょうか？
（あるいは、元の動画に黒のサイドが含まれているのかも知れません）

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。恐らく計算間違えによるもののようです

通報する

お礼日時：2022/01/25 17:10

No.4

回答者： wanderer1
回答日時：2022/01/25 16:18

添付をご覧いただければ、理解が進むと思います。

16:9で考えると、896pxに対する天地幅は504pxです。

アプリケーションは天地幅414pxを優先して書き出しをしており、左右に余白（余黒？）を用いて16:9を担保している状況にあります。

アスペクト比が間違っているためにそのようなことになっています。

天地幅を優先するのか、左右幅を優先するのかで、書き出し方法とコーディングが違ってくることはご理解いただけるのではないでしょうか？