CSSのみでフルスクリーンの動画背景を実装する方法

  • Posted on
  • Category : Tips
CSSのみでフルスクリーンの動画背景を実装する方法

ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのを、スクリプト等は使用せずにCSSのみで実装する方法です。古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。

実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

<body>
	<video autoplay loop poster="img.jpg">
		<source src="movie.mp4" type="video/mp4">
	</video>
</body>

CSS

body {
	margin: 0;
	padding: 0;
	background: url(img.jpg) center center fixed no-repeat;
}
video {
	position: fixed;
	top: 0; 
	left: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
}

フルスクリーンで表示されるように幅と高さを指定したvideo要素をposition: fixedで配置し、body要素には一応IE8などの非対応ブラウザ用に背景画像を指定しておくというものになります。
(非対応ブラウザは完全に無視ということであればbody要素への記述は必要ありません)
先述したようにほぼ全てのブラウザで同じように表示させたい場合はスクリプトを使って実装することにはなると思いますが、モダンブラウザであればこのようにCSSのみで簡単に実装することができます。

実際の動きは以下で確認できます。

※DEMOで使用している動画は、「商用利用できるものも有り!フリーの動画配布サイト 7」でも紹介している「Distill」で配布されているものを使用しています。

Back to Top

CSSのみでフルスクリーンの動画背景を実装する方法

CSSのみでフルスクリーンの動画背景を実装する方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。