유튜브 영상을 배경으로
본문
neko24님이 올리신 유튜브 영상을 배경으로 쓰기 CSS 입니다
여기에 올려진 소스를 보고 참고해서 메인에 적용해보는데 여러 동영상을 적용해보고
그누에 올려진 바로 보기가 가능한 동영상 주소도 넣어봣는데
불러올수 없다고 하네요 ..원인을 알수가 없네요 ..
<style>
* { 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; }
}
</style>
Copy
<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>
또는 혹 다른 방법도 여쭤 봅니다 ..!!
그누회원님들 시간내셔서 읽어봐 주셔서 감사합니다 ~~!! 부디 뜻한바 이루시기를 빕니다 수고하세요 ....!!
답변 2
브라우저에서 유튜브 자동재생 조건은 음소거 입니다.
https://www.youtube.com/embed/PBCGYqX-Njw?rel=0&autoplay=1&mute=1&version=3&loop=1&playlist=PBCGYqX-Njw&controls=1&vq=hd2160
mute 넣어보세요.
답변을 작성하시기 전에 로그인 해주세요.