2017-12-28 60 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コードを使用する必要があります。読み込んだビデオを開いている間にフェードを追加してください:

関連する問題