背景動画(video要素)

[ ID : 1143 ]
背景動画(video要素)

概要

キービジュアルなどで利用される、テキストの背景に動画を再生させる方法を紹介。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

実装方法


HTML

<div class="c-movie">
    <video class="c-movie__video" src="https://konocode.jp/img/dummy/dummy.mp4" playsinline muted autoplay loop></video>
    <p class="c-movie__txt">ダミーテキスト</p>
</div>

SCSS

.c-movie {
position: relative;

&__video {
width: 100%;
}

&__txt {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #fff;
font-size: 5rem;
transform: translateY(-50%);
}
}

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録