HTML5|CSS 유튜브 영상을 웹페이지 배경으로 사용하는 CSS 기법
페이지 정보
조회 214회
작성일 20-04-29 09:37
유튜브 동영상을 웹페이지 전체 배경으로 사용하는 HTML/CSS 기법이다.
video-background 컨테이너와 video-foreground 안의 iframe을 화면에 꽉 차게 배치하고 z-index를 낮춰 콘텐츠 뒤에 깔리게 한다.
화면 비율에 따라 16:9, 9:16 미디어 쿼리로 확대 영역을 조정하는 전체 CSS와 HTML 예제 코드를 제공한다.
* {
box-sizing: border-box;
}
.video-background {
background: #000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#vidtop-content {
top: 0;
color: #fff;
}
.vid-info {
position: absolute;
top: 0;
right: 0;
width: 33%;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 1rem;
font-family: Avenir, Helvetica, sans-serif;
}
.vid-info h1 {
font-size: 2rem;
font-weight: 700;
margin-top: 0;
line-height: 1.2;
}
.vid-info a {
display: block;
color: #fff;
text-decoration: none;
background: rgba(0, 0, 0, 0.5);
transition: .6s background;
border-bottom: none;
margin: 1rem auto;
text-align: center;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.video-foreground {
width: 300%;
left: -100%;
}
}
@media all and (max-width: 600px) {
.vid-info {
width: 50%;
padding: .5rem;
}
.vid-info h1 {
margin-bottom: .2rem;
}
}
@media all and (max-width: 500px) {
.vid-info .acronym {
display: none;
}
}<div class="video-background">
<div class="video-foreground">
<iframe class="ww" src="https://www.youtube-nocookie.com/embed/n0AY4ebPy4w?autoplay=1&loop=1&controls=0&vq=hd720"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div id="vidtop-content">
<div class="vid-info">
<h1>YouTube</h1>
<p>Good!</p>
</div>
</div>