유튜브 영상을 배경으로

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
유튜브 영상을 배경으로

QA

유튜브 영상을 배경으로

본문

neko24님이 올리신 유튜브 영상을 배경으로 쓰기 CSS 입니다

https://sir.kr/g5_tip/10145

여기에 올려진 소스를 보고 참고해서 메인에 적용해보는데 여러 동영상을 적용해보고

그누에 올려진 바로 보기가 가능한 동영상 주소도 넣어봣는데

불러올수 없다고 하네요  ..원인을 알수가 없네요 ..

 

<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

이상없이 잘 불러와 집니다.

f12 누르셔서 다른 선행 스크립트가 오류가 있는지 확인해보세요.

 

thumb-1982090681_1727693555.6604_730x465.png

애드프로님 저렇게 아까 나오긴 햇는데 자동 실행이 안되는데요 그래서
일단 제가 적용을 잘못해서 그런줄 알앗네요 그래서
밑에 댓글에 있는
--//
다만 한가지~
위 소스로는 loop=1 이 안먹길래 검색해보니 버전이 바뀌었네요
아래 소스 참고해주세요.

<iframe class="ww" src="https://www.youtube.com/embed/PBCGYqX-Njw?rel=0&autoplay=1&version=3
    &loop=1&playlist=PBCGYqX-Njw&controls=1&vq=hd2160" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

version=3&loop=1
위 와같이 루프 앞에 버전이 표기되야 루프가 먹네요~ ---//
이걸 넣어보기도 햇네요 ....그래도 잘 안되서 질문 드렷구요
혹시 자동 재생은 되시나요 ....전 자동 재생이 되는줄 알앗거든요....

애드프로님 동영상이 자동 실행이 안되네요.....
해보니 어찌해서 동영상은 불러오기가 되는데요
동영상이 멈춰서 재생이 안되서 잘못한줄 알았네요
위에 소스 그대로 적용하고 version=3까지 추가햇는데 동영상 재생이 안되네요...

브라우저에서 유튜브 자동재생 조건은 음소거 입니다.

 

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 넣어보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 126,530 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT