CSSでホームページに動画を埋め込んだ際に黒帯が発生する問題の解決方法

2022/01/25 11:12

このQ&Aのポイント

CSSでホームページに動画を埋め込んだ際に、左右に黒帯ができてしまう問題が発生しました。object-fit: fill;を試しましたが解決しません。
動画は1280×720で作成し、ホームページ用にサイズを小さく変更し、アスペクト比16:9で再生しています。
動画の編集ソフトでアスペクト比は自動的に16:9に設定しており、解像度の変更も正しく行っています。

css ,videotタグ。ホームページに動画を埋

css ,videotタグ。ホームページに動画を埋め込んだのですが、左右に黒帯ができてしまいます。この黒帯を無くしたいです。ソースコードは下にあります。object-fit: fill;でも治りません。動画は元は1280×720サイズで作成し、ホームページ用にサイズを小さくしてｍｐ４に書き出しました。1280×720から896×414に変更、アスペクト比１６：９でＯＫ。 1280×720の時は黒帯はでませんが、サイズを896×414に変更してアップロードすると黒帯が出てしまいます。動画編集ソフトで書き出しする時アスペクト比は自動で16:9になるので間違ってないと思います。付属画像参考 ●実際のホームページのＵＲＬは以下です（何故かアクセス制限が出て見れなかもしれませんので、ソースコードと付属画像も下に提示してます。） https://rensyuu.s205.xrea.com/rensyuu12.tokyo/PHPMailer/201.html ★参考にしたサイト動画の大きさ（デバイス別とアスペクト比）の参考サイト https://www.somethingfun.co.jp/video_tips/movie_resolution#:~:text=%E7%94%BB%E9%9D%A2%E3%81%AE%E8%A7%A3%E5%83%8F%E5%BA%A6%E4%BB%A5%E4%B8%8A%E3%81%AE,%E8%80%83%E3%81%88%E3%82%8B%E3%81%A8%E3%82%88%E3%81%84%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82 ★ソースコードは以下です。 <!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>

hayosat
お礼率24% (174/699)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

AsarKingChang
ベストアンサー率46% (3467/7474)

2022/01/25 11:44 回答No.1

回答ではないのですが、見てみようと思ったのですが、 >●実際のホームページのＵＲＬは以下です見れないみたいで。。問題点が確認できませんでした。（という事は他の人も見れないので、回答しにくいかも！という　雰囲気）実際に見れていないので、予想だけになりますが。そのムービーを単体で再生すると、フチはでますか？そこででてるなら、元々の素材の問題の可能性と問題点の切り分けから行くのが、解決に向かうとは思うので。（その程度しか、今は判断できず）