如何使 youtube 视频适合屏幕？答案

【问题标题】：How can I make youtube video fit the screen?如何使 youtube 视频适合屏幕？
【发布时间】：2017-07-06 05:30:02
【问题描述】：

我正在使用 iFrame 加载 youtube 视频。使用当前代码，视频的边距会略微裁剪（包括缩略图）。为了使其适合下方黑色背景的屏幕，我必须进行哪些更改？要测试只需将此代码粘贴到 html 文件中并在浏览器中运行。窗口调整大小显示了问题。

<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>

【问题讨论】：

标签： html youtube-iframe-api

【解决方案1】：

将以下 CSS 添加到您的网站，以使您的页面主体 100% 显示在视口中：

body {
    height: 100vh;
}

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

或者你可以使用 CSS 来设置 iframe 元素的宽度和高度：

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

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

【讨论】：