人気の株主優待

weblovelog

ウェブ業界人のためのウェブ情報サイト。

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

   

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

ただし!

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

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

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

Quick Tips: Using Videos as Backgrounds

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

 

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

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

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

 

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

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

 

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

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

 - JavaScript, jQuery, WEB, レスポンシブウェブデザイン

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事