CSSのみで全画面に動画を設置して、その上に文字などを重ねて表示する方法

CSSのみで全画面に動画を設置して、その上に文字などを重ねて表示する方法

CSSのみで全画面に動画を設置して、その上に文字などを重ねて表示する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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 で
スポンサードリンク

関連記事

コメントを残す

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