2017-12-28 41 views
1

비디오를로드하기 전에 Youtube Video Thumbnail을 볼 수 있는지 궁금합니다.Youtube Video Thumnbail을 배경 이미지로 설정하기 전에 비디오를로드하기 전에

<html> 
    <head> 
    <style> 
    .video-background { 
     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; 
    } 
    @media (min-aspect-ratio: 16/9) { 
     .video-foreground { height: 300%; top: -100%; } 
    } 
    @media (max-aspect-ratio: 16/9) { 
     .video-foreground { width: 300%; left: -100%; } 
    } 
    </style> 
    </head> 
    <body> 
    <div class="video-background"> 
     <div class="video-foreground"> 
      <iframe src="https://www.youtube.com/embed/PR97m89_s4c?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=PR97m89_s4c" frameborder="0" allowfullscreen></iframe> 
     </div> 
     </div> 
    </body> 
</html> 

https://codepen.io/jacksonjack/pen/VypELM

그것은 비디오를로드하지만로드하는 동안 첫 번째 2-3초가 검은 화면입니다 : 여기

내가 순간에 무엇을의 예입니다.

제안 사항?

답변

1

로딩 시간을 막기 위해 5 초 후에 비디오를 표시하는 데 JS 코드를 사용해야합니다.로드 된 비디오를 여는 동안 페이드를 추가하면 완료됩니다.

관련 문제