幅いっぱいにヘッダーの背景に動画を使った手法 Header with Video

幅いっぱいにヘッダーの背景に動画を使った手法 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

初期の文字が見えなくなってしまう状態

WS001965

文字が動画と同じ高さで消えてします

 

改良版

WS001964

高さを画面いっぱいにしたのと、背景に色を付けたので文字が見える

 

とりあえず heightで100%になるようにしています、画面の高さ以上コンテンツがはみ出る場合は見えなくなってしまうので、min-height:100%;で指定しています

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)