概要
キービジュアルなどで利用される、テキストの背景に動画を再生させる方法を紹介。検証ブラウザ
- 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%);
}
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
