サイトのフロントに背景動画を埋め込んだら、なんかかっこよくね？CSSで深さ変えて、動画埋め込めばいいだけだろ？と簡単に考えて実装してみてわかった、背景に自動再生動画の埋め込みをお勧めしない3つのデメリットについて

WEBサイトの背景に動画を使ってみようと思った

既存のサイトをリニューアルする際に、新しい技術にチャレンジしてみようと、背景に動画を埋め込んだサイトを作る事計画し、色々勉強してみたら、HTML5環境ではvideoタグを使えばすぐにできるとの事で、さっそく以下の点を踏まえて準備してみた

• videoタグ・設置用のCSSの用意
• 動画が表示されない時の代替画像
• 複数の形式の無音動画の作成（mp4/webm）

結論を言えば、設置及び表示はうまくいったので
なんだｗ簡単にできるじゃん！いい感じだぜ！
・・と喜んでから数分後、実機（iphone5・ipad2）にて確認してみた所
な、なんじゃこりゃぁ～！(ﾟДﾟ;)

デメリット1：スマホ・タブレットで動画が自動再生されない

HTML5の動画埋め込み形式のvideoタグでは、autoplayを指定する事で、サイトを開いた瞬間に動画を再生させる事ができる。これをzindexを使ってレイヤーを最下層にしてしまえば、背景動画埋め込み+自動再生の完成である。もちろんの事だが、音つきの動画を使うのはナンセンス。あくまでも無音の動画を背景として考えてよう・・ってそんな事はどうでもいい！
問題は、背景動画の自動再生はPCのみであるという事
残念ながら、ｉｏｓ、androidどちらの機種でも、autoplayは無効であり、ただ無駄に動画を埋め込んだ状態で、でっかく再生ボタンが表示されという始末・・。おまけに埋め込み高さであるheightをａｕｔｏや100％に指定していると・・とんでもない縦スクロールの距離になり、ユーザーがコンテンツにたどり着くのはいつの日か・・というレベルでレイアウト崩れが起きる・・が！
PCで動画を確認して満足している人は・・おそらくタブレットやスマホ上での表示崩れに気づかないかもしれない。あれはモバイルユーザビリティガイドラインに違反して、めっちゃ順位を下げられるレベル

デメリット2：読み込む動画によって速度と見た目が変わる

vidoeタグを使う際、推奨されている読み込みデータが3つある。

• 動画が表示されない時の代替画像
• webm形式の動画
• mp4形式の動画

基本、ユーザーの再生環境を考えて、複数の動画を用意したうえで、最適な再生形式の動画を再生する・・というものなので、非常にありがたい話なのだが・・動画の品質の問題がある

• mp4：動画品質最高・サイズでかい（68MB）
• webm：動画品質低い：サイズ小さい（3.8MB）

自分のPC環境で背景動画としてmp4のみ読み込ませた時のあの感動！
そして、webm形式に変換した動画を再生させた時のあの絶望！
webm形式の動画作成には、mp4の動画を変換させたので、中身は一緒なのだが、映像が汚い・色が変わってるなど・・とてもじゃないが、WEBサイトのフロントの背景としては使いたくないレベル
・・なのに！webm形式が優先的に読み込まれる＿|￣|○
当然、ファイルの容量が小さく読み込みが軽いため、優先されるのかもしれないが・・劣化した動画を読み込ませるくらいなら、mp4一本にしたい所だけど、今度はmp4に対応してない再生環境の問題もあり・・やっぱり複数形式設置が推奨されるという深い悲しみ＿|￣|○

デメリット3：テーマ・テンプレートのメディアクエリとの相性

背景動画埋め込みに利用してテンプレートが賢威7コーポレートのヘッダーブロックだったのけれど、レスポンシブWEBデザイン用に定義されているCSSのメディアクエリが・・非常に細かい＿|￣|○
1200px　＞　1100px　＞　950px　＞　860px　＞　736px　＞　700px　＞　620px　＞　540px　＞　480px　＞　320px　＞・・そろそろ勘弁してくれ・・
もとになるPC上での表示のCSSを調整するものの・・その追記したCSSなどを、各レイアウトサイズのメディアクエリにも定義を追加していかなければいけないという事に・・＿|￣|○ﾒﾝﾄﾞｲ
追記ではなく、元からあるCSSの数値を変更してみたものの・・各レイアウトごとに、同じ定義でも数値が微調整されているという事で、残念ながら、元を変えれば一括変換という淡い希望すら消えた
以上、3つの問題

• タブレット・スマホ環境での自動再生不能
• 動画形式による見た目と速度の安定性
• 利用テンプレートとの相性

これらを考えると背景動画にするのはあんまり得策じゃねーな・・という結論
それでも背景動画を埋め込みたいという人へアドバイス

背景動画はPC以外で表示させない！

HTML5のvidoタグで動画が表示されない時の代替として画像を指定したりなどは可能だが、再生環境（ios・androidに限らずブラウザによる違い）を考慮すると、それもうまく動作しないケースもある
また、メディアクエリでラップトップやスマホサイズ時の表示の調整にあわせてといった措置をした所で、指定範囲外の微妙なサイズでは意図しない形で動画が表示されてしまい、無駄に読み込み速度が遅くなり、かつ、表示も崩れてしまうという一体、何重トラップですか？
しかも！ユーザーの環境によっては、wifi契約の通信量の問題もあるから、サイト開いていきなり大容量の動画が再生されるとか・・飲み屋入っただけで
いきなりお通し料金とられるのと一緒！（^ω^）ｲﾗｯｼｬｲﾏｼΣ(･ω･ﾉ)ﾉ！
それって・・モバイルユーザビリティ的にアウトでしょ(笑)

結論：PCサイズ以下　なら　非表示！（display:none;）

これはヘッダーや上部コンテンツという枠で指定した中に動画を背景として埋め込む際の措置であって、よくあるサイトの背景を完全に動画にしてしまう場合は、やったら全部消えるので注意(笑)