<video controls>
<source src="비디오 파일 경로" type="video/mp4">
대체 텍스트
</video>출처: https://comple.co.kr/510 [생각과 실천:티스토리]
코드작성 방법1. width:100%, height:100%
<div class="bg-video">
<video class="bg-video__content" autoplay muted loop>
<source src="img/video.mp4" type="video/mp4" />
<source src="img/video.webm" type="video/webm" />
Your browser is not supported!
</video>
</div>
.bg-video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.15;
}
.bg-video__content {
height: 100%;
width: 100%;
object-fit: cover;
}
코드작성 방법2. width:100%, height:500px; overflow:hidden
출처: https://www.codingfactory.net/11880
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body { padding: 0px; margin: 0px; }
.jb-box { width: 100%; height: 500px; overflow: hidden;margin: 0px auto; position: relative; }
video { width: 100%; }
.jb-text { position: absolute; top: 50%; width: 100%; }
.jb-text p { margin-top: -24px; text-align: center; font-size: 48px; color: #ffffff; }
</style>
</head>
<body>
<div class="jb-box">
<video muted autoplay loop>
<source src="videos/Network.mp4" type="video/mp4">
<strong>Your browser does not support the video tag.</strong>
</video>
<div class="jb-text">
<p>Lorem Ipsum Dolor</p>
</div>
</div>
</body>
</html>https://www.codingfactory.net/11880
반응형