Webサイトに動画を表示させたい

Question

サイト内の背景（今回はヘッダー部分）に動画を組み込みたいと思っております。
・形式はmp4で<video>タグにて組み込む場合と、youtubeにアップしたものをjQueryなどで動かすもののどちらがよいのでしょうか。

・以前、<video>タグにてmp4動画を組み込んだ際、動画の周りに黒い帯（レターボックス？）が表示されてしまったのですが、これはどのようにしたら消すことが出来るのでしょうか。サイズを1280×720に変更してアップしても左右に帯がはいってしまいます。

・スマホ対応の場合、iosでもｍｐ4は表示されるのでしょうか。

質問が多くなってしまい、申し訳ございません。
どうぞよろしくお願いいたします。

Answer 1

<video>のアスペクト比と動画のアスペクト比が一致していなければ、上下ないし左右に帯が入いります。
<video>のアスペクト比を動画のアスペクト比と一致させれば、帯はなくなると思います。
CSSにはobject-fitというのがあり、これをfillにするとアスペクト比崩してでも<video>に帯なくして表示できますが．．．
あとmp4でしたらiOSでも表示されると思います。

Comments

[rrr6]

ご回答ありがとうございます！
詳細をおうかがいしたいのですが、<video>のアスペクト比の設定は<video>タグ内のwidth,heightでの設定ということでしょうか。
それともデフォルトで決まっているのでしょうか。

[turbgraphics200]

ええ、<video>タグ内のwidth,heightでの設定、表示上のアスペクト比です。