CSSのみで背景いっぱいに動画を再生してコンテンツを重ねて表示する方法

CSSのみで背景いっぱいに動画を再生してコンテンツを重ねて表示する方法

スポンサードリンク
CSSのみで背景いっぱいに動画を再生してコンテンツを重ねて表示する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 月額費用0円!格安ホームページ制作ならアットウェブへおまかせ♪
  • このエントリーをはてなブックマークに追加

jQueryなどを使わずに、背景動画を設置して、再生される動画の上にテキストなどのコンテンツを表示する方法をご紹介いたします。

デモページを用意したので、以下のリンクよりご参照いただければと思います。

デモページを見る

動画は、Coverrというフリーの動画素材を配布しているサイトからダウンロードしました。

CSSのみで背景動画を設置してコンテンツを重ねて表示する方法

HTMLは以下の通りです。動画とコンテンツをマークアップします。

<video autoplay loop poster="movie.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
</video>
<div class="cont">
<div class="cont-inner">ここにコンテンツを入力します。</div>
</div>

動画のファイル名やパスは適宜変更してください。

CSSは以下のように記述します。

video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(movie.jpg) no-repeat;
background-size: cover;
}
.cont{
display:flex;
justify-content:center;
margin: 30% 0 0;
}
.cont-inner{
width: 210px;
padding: 20px;
border: solid 1px #fff;
color: #fff;
}

videoタグについては、z-indexでコンテンツの後ろで再生されるよう指定し、min-widthとmin-heightで背景いっぱいに表示されるようにしています。

コンテンツについては、位置や色などを調整しているだけなので、この部分はサイトに合わせて変更してください。

あとがき

最近は、背景で動画が再生されるページをよく見かけるようになりましたね。

上述したように、割と簡単に実装できますので、サイトの背景で動画を再生させたい場合はぜひ参考にしてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。