【レスポンシブ対応】コピペでOK！videoタグでWEBサイトに動画を埋め込む方法

<video>タグでmp4などの動画を埋め込む方法を紹介します。

まずはとりあえずコピペ

chromeやFireFoxなどのブラウザでデベロッパーツールを使ってスマホ版、PC版それぞれ確認していただけると分かりやすいと思います。

HTML

<div class="vid_contents">
<video class="vid_main" src="images/movie.mp4" controls loop playsinline muted></video>
</div>

CSS

div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
padding: 4% 4% 4% 4%;/*ここで動画の周りの余白を調整*/
background: #e6e6e6;/*余白の背景色*/
}
video.vid_main {
width: 100%;
max-width: 920px;/*PC版での最大幅*/
}

レスポンシブ対応になっています。

<video>タグの使い方

※動画はMP4形式で用意しておきます。

MP4動画のサイズ圧縮オススメ→VideoSmaller

基本形

<video src="video.mp4"></video>

<video></video>の中には何も書かなくてOKです。
しかしこれだけだと画像として読み込まれるだけで動きません。

属性タグ

動画の再生やメニューボタンの追加にはautoplayなどの「属性」を追加します。

<video src="video.mp4" loop autoplay muted></video>

• loop・・・ループ再生
• autoplay・・・自動再生
• muted・・・再生時、デフォルトでミュート設定にする

上記のような属性を付け足すだけで簡単に再生できるようになります。
※autoplayは必ずmute属性とセットで指定しましょう。
chromeやsafariなどブラウザのルール上での仕様です。

参照：videoタグのつまずき／スマホで再生されない/playsinlineの存在

他にも以下のような属性があります。
使用目的に合わせて組み合わせて使うと良いです。

• controls・・・メニューボタン設置
  

  <video src="video.mp4" controls></video>

• poster・・・開始画面の画像を設定する
  予めサムネイルに設定したい画像を用意します。

  <video src="video.mp4" poster="image.jpg"></video>

• playsinline・・・インライン再生にする
  スマホで動画再生すると動画プレーヤーを開かず、そのままWEBサイト上で再生することができます。

  <video src="video.mp4" playsinline></video>

• width/height・・・横幅・高さを指定する
  高さや幅を指定できます。px指定のみで%指定が不可なので、CSSで調整することをお勧めします。

  <video width="400px" height="300px" src="video.mp4"></video>