【HTML5】ホームページに動画を埋め込む

上記のような動画をサイトに配置すると、よりリッチなサイトイメージにすることも可能です。

ブラウザ依存を減らすため、webm形式とmp4形式のビデオを準備します。
私はVLC　playerでmp4→webm変換しています・

以下のようなvideoタグをHTMLに記載します。　

<div class="mainVisual">
  <video poster="/sample/html/res/cloud.jpg" webkit-playinline playsinline autoplay loop muted>
    <source src="/sample/html/res/cloud.webm" type="video/webm">
    <source src="/sample/html/res/cloud.mp4" type="video/mp4">
  </video>
</div>

背景として利用する場合は、以下のオプションを指定します。

・playsinline　HTMLページ上で再生
・webkit-playinline HTMLページ上で再生(Webkit向け)
・autoplay　自動で再生
・loop　繰り返し
・muted　音声をミュート（容量削減のため、あらかじめオーディオを削除しておいた方がよいです）

文字などを上に載せたい場合は、以下のようなCSSを用意します。

.mainVisual {
position:relative;width:100%;height:400px;overflow:hidden;
}
.mainVisual video {
position:absolute;left:0;top:0;min-width:100%;min-height:100%;z-index:-1;
}
.mainVisual h1 {
position:absolute;left:0;top:0;padding-top:180px;min-width:100%;min-height:100%;z-index:2;text-align:center;color:#fff;font-size:2.4em;
text-shadow:black 1px 1px 10px, black -1px 1px 10px,black 1px -1px 10px, black -1px -1px 10px;
}
@media screen and (max-width: 768px) {
  .mainVisual {
  height:250px;
  }
}

デモページはこちら

ちなみに、この動画サンプルは、動画AC様からダウンロードしたものです。
写真AC,イラストACのサービスは使いやすく本当に助かりますよね。