HTMLで横幅いっぱいの動画を埋め込む方法

サイトのメインビジュアルなどによくある、横幅いっぱいに動画を配置する方法です。

用意する動画形式

ファイル形式は、ほとんどのブラウザが対応しているmp4がベスト。
videoタグをつかうことで、複数の形式の動画を読み込むことができます。

<video muted autoplay loop>
　　<source src="video.webm">
　　<source src="video.mp4">
　　<img src="video.png" alt="">
</video>

サンプルでは
1.mp4を読み込み
2. (mp4が対応してない場合は）webmを読み込み
3. (mp4もwebmも対応していない場合は) png画像を表示
と指定しています。

他の形式に変換したい場合は、オンライン上のサービスを使うこと簡単に変換できます。

無料のオンライン動画コンバーター — Convertio
https://convertio.co/ja/video-converter/

videoタグで指定できるもの

src：動画ファイルの指定
poster：開始画面の画像を設定
preload：動画をあらかじめ読み込む（auto、metadata、none）
autoplay：自動再生
muted：ミュート（消音）
loop：ループ再生の指定
controls：再生ボタンなどコントロールパネルをを表示
width：横幅の指定
height：高さの指定

トップなどに埋め込むのであれば、muted・autoplay・loop と指定あげるといい感じになります。
サイズが固定でない場合は、横幅や高さをCSS側で記述してあげることで、それっぽくなります。

サンプル

動画を横幅いっぱいにして、中央にコピー文を置きたい場合はこんな感じ。

See the Pen HTMLで動画を埋め込む by web-tore (@web-tore) on CodePen.dark

mp4なのに動画が再生されない…?

サイズが大きすぎるのが原因で、IE11で再生できないことがありました。
その場合は、Adobe Media Encoder などでコーデック（圧縮）しなおす必要があります。
（コーデックするときは「H.264形式」であればよいようです。）

IE11のみ…ということであれば、限定的なのでIE11のみ動画非表示にしてしまってもいいかもしれません。

.for_ie11 {
  display: none;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, video {
    display: none;/* IE11 */
  }
  *::-ms-backdrop, .for_ie11 {
    display: block;
  }
}