如何讓YouTube視頻適合屏幕？

我使用iFrame加載YouTube視頻。使用當前代碼，視頻的邊距略微裁剪（包括縮略圖）。爲了使它適合黑色背景下的屏幕，我需要改變什麼？要測試只需將此代碼粘貼到HTML文件並在瀏覽器中運行它。窗口大小顯示問題。如何讓YouTube視頻適合屏幕？

<html> 
    <head> 
     <title>Youtube Video</title> 
     <meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'/> 
    </head> 
    <body bgcolor='white' marginwidth='0' marginheight='0'> 
     <!-- The <iframe> (and video player) will replace this <div> tag. --> 
     <div id='player'></div> 
     <script> 
      var tag = document.createElement('script'); 
      tag.src = 'https://www.youtube.com/iframe_api'; 
      var firstScriptTag = document.getElementsByTagName('script')[0]; 
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

      var player; 
      function onYouTubeIframeAPIReady() { 
       player = new YT.Player('player', { 
        playerVars: { 'iv_load_policy': 3, 'controls': 1, 'rel': 0, 'showinfo': 0, 'fs': 0 }, 
        frameborder: '0', 
        height: '100%', 
        width: '100%', 
        videoId: 'axZ1e0_2ysc', 
        events: { 
         'onReady': onPlayerReady, 
         'onStateChange': onPlayerStateChange 
        } 
       }); 
      } 

      function onPlayerReady(event) { 
       document.title = '0'; 
      } 

      function onPlayerStateChange(event) { 
       if (event.data == YT.PlayerState.PLAYING) { 
        document.title = '1'; 
       } else if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) { 
        document.title = '2'; 
       } 
      } 
     </script> 
    </body> 
</html>

來源

2017-07-06 Mihai

添加以下CSS到您的網站，使您的網頁的體視口的100％：

body { 
    height: 100vh; 
}

例子：https://codepen.io/anon/pen/EXpmWR

或者你可以使用CSS來設置widht和所述iframe元件的高度：

iframe { 
    width: 100vw; 
    height: 100vh; 
}

示例：https://codepen.io/anon/pen/gRjWWb

來源

2017-07-06 06:01:27 williamli

如何讓YouTube視頻適合屏幕？

回答

相關問題