
とあるWebサイトを作成中。header部分に動画を埋め込む際の自分への備忘録です。バタバタとしており、絵の方は最近進んでおりません。
html
<div class="video-test">
<video src="movie.mp4" muted autoplay loop>
<img src="#" alt="Placeholder" />
</video>
</div>
CSS
.video-test {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
height: 100vh;
}
video{
width: 100vw;
height: 100vh;
object-fit: cover;
}
header{
height: 100vh;
}
とあるサイトを1から作成中。JavaScriptを多用したサイトになる予定です。
0