フルスクリーン背景動画　IE8以下とスマホ対策

とっても効果的で素敵なフルスクリーンの背景動画。

ただし！

• 重かったり…
• IE8以下（レガシーブラウザ）では動かなかったり…
• スマホでは上にコンテンツを重ねると、リンクが効かなくなっちゃったり…

けっこう対応が大変です。

いろいろ調べた結果、下記のサイト（英語サイト）を参考にさせていただきました。

Quick Tips: Using Videos as Backgrounds

やはり、IE8以下とスマホは動画から画像に変換しちゃうことにしました。

 その他参考にさせていただいたサイト様

BigVideo.jsを使って動画を全画面表示する

BigVideo.jsというjQueryプラグインを使う方法です。
思っている感じに動いた！のですが、読み込まなければいけないものが多いのが曲者ですね。
私はいっぱい読み込むのが嫌いです。ということで断念。

[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック

上記のサイト様、考え的にはいいなーと思いました。しかし、何故かIEが上手く動かなかったので、追求することなく断念。
時間があるときに、じっくり見てみようと思います。

背景画像の拡大・縮小 → background-size !

背景画像の幅・高さを拡大・縮小するプロパティ「background-size」。
今回既存jsを修正するために必要でした。いつも調べて、いつも忘れちゃうので、今度時間があったらまとめなきゃなー。
と思いつつ、今回はこちらのサイト様にお世話になりました。