Question

我正在使用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>

Answer 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

如何让youtube视频适合屏幕？

1 个答案: