幅いっぱいにヘッダーの背景に動画を使った手法 Header with Video
PR
Header with Video
By Leonides Delgado
http://codepen.io/LEOnides/pen/glnsf
ヘッダー部分の背景に動画を使った手法です、まずはリンク先で御覧ください。
動画はそれぞれのブラウザに対応させるためにMP4とOGGで指定されています
動画部分は <video>の部分で autoplay loop muted が指定されていて自動再生とループ、音声OFFになっています。
<video>タグのなかに <source src=””>で動画のURLを指定すれば読み込めます、タイプの違うファイルを複数指定することで各ブラウザに対応
あとは動画の上に コンテンツの要素をpositon:absolute;で重ねています
動画部分からはみ出る箇所のが見えなくなってしまうので、少し改良しました
これでよりレスポンシブらしくなったかと思います
http://codepen.io/tatsuya/pen/hnpcr
初期の文字が見えなくなってしまう状態
文字が動画と同じ高さで消えてします
改良版
高さを画面いっぱいにしたのと、背景に色を付けたので文字が見える
とりあえず heightで100%になるようにしています、画面の高さ以上コンテンツがはみ出る場合は見えなくなってしまうので、min-height:100%;で指定しています
PR
短縮URL:
COMMENT