<video>タグと動画サイズについて

Question

<video>タグにてphotoshopで作成したmp4動画をアップしたいのですが、サイズが合わず、左右に黒帯が出てしまいます。
★960×550のサイズで実際のサイトにはアップしたいのですが、制作する動画サイズはいくつが望ましいでしょうか。また、<video>タグやCSS等で統制する方法はありますでしょうか

①　**960×720（3：4の比率）**で作成した動画をHTML上に入力し、

<!--videoタグ-->
<div id="samv">
<video  id="video" autoplay loop width="960" height="720" ><source src="sample.mp4">
</video>
</div>
<!--videoタグ-->

CSSで、高さを550pxに制御すると、動画の下の部分（170px分）は切れてしまいますが、黒帯は無く表示されます

#samv {
    width: 960px;
    height: 550px; 
    margin: auto;
    overflow: hidden;
}

②　しかし、元の動画を960×550で制作し、
<video id="video" autoplay loop width="960" height="550" >と入力し、
先程のCSSと組み合わせると、画像は全て出るのですが、元のサイズではなく、左右に黒帯が出てしまいます。
この時、動画のサイズは変更され、黒帯含めて、960×550となってしまいます。

★3:4の比率で作成した動画では黒帯が出ないので望ましいと思ったのですが、画像を切ることなく、黒帯を出すことも無く、960×550のサイズで表示させることは難しいのでしょうか。
①の例の場合、CSSで統制できたのですが、②の場合は<video>タグやcssでサイズを変更しても、黒帯は消えません。
解決法ございましたら教えてください。。。

Comments

[defghi1977]

現象を把握しにくいため, 可能であればスクリーンショットを追加して下さい.

[rrr6]

ありがとうございます。すみません、動画画像をのせられないのですが、黒帯表示の画像をのせさせていただきました。こちらでわかりますでしょうか？

[defghi1977]

サイズが960x500となっているのはなぜですか？また動画サイズ「960×720」におけるコードを例として挙げているなど, あなたが問題としている箇所が極めてわかりにくくなっています. （1）最終的にあなたが実装したコードと（2）そのコードがもたらしている出力結果と（3）望ましい出力結果について今一度整理して下さい.

Answer 1

「960×550」で作成した動画そのものに「黒帯が含まれていないか」を確認願います.

通常video要素に動画と異なるアスペクト比のサイズを指定した場合, 余った部分は透過するはずです. しかしあなたがおっしゃるには黒色の帯が出来ている. ということは「960×720（3：4の比率）で作成した動画」を「960×550」に落とし込む過程で, 黒色の帯が混入したとしか思えないのです.

Comments

[rrr6]

ありがとうございます！
動画を確認してみます。