2014年05月29日(木)
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。
Basic Fullscreen Video Background
レスポンシブにも対応しており、下記のフルサイズのデモページでお試しください。
フルサイズのデモ
IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。
実装は、非常にシンプルです。
HTML
動画はbod...
author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
フォントはウェイトを使いこなすと更に面白くなる!ウェイトが軽いフォントの効果的な使い方
NEXT ›
全600種類以上!ビジネスからホビーまで、ソリッドなラインでデザインされた美しい無料のアイコン素材 -Linea
関連記事
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『スクリプト無し、動画をページの背景いっぱいに表示する方法』についてまとめています。
この記事は特にレスポンシブ・javascript・jQuery・HTML5・動について書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。