Question

我正在尝试在我的网站背景上嵌入YouTube视频。我有这个工作，它是响应，除了当我的嵌入视频是宽屏（16：9），但我的视口是例如方形（1：1），它创建黑色边框，以补偿剩余的空间。

enter image description here

我想知道是否有裁剪视频的选项，以便＆＃39;中心＆＃39;视频总是在屏幕上，就像上面的示例图像一样。剩下的部分将被切断。我认为图像的CSS等价物是background-size: cover;。

这是我目前的代码。尝试使您的视口正方形，您将看到黑色边框。它也可以在jsfiddle中找到。

<html>
<head>
    <style>
        body,html{ margin:0; padding:0; height:100%;}

        div.bg_utube {
            position: fixed;
            z-index: -99999;
            -webkit-user-select: none;
            user-select: none;
            width: 100%;
            height: 100%;
        }
        #player{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div class="bg_utube">
    <div id="player"></div>
    <script>
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        var video_id = 'JQ7a_8psCn0';

        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: video_id,
                playerVars: {
                    'autoplay': 1,
                    'controls': 0,
                    'html5': 1,
                    'modestbranding': 1,
                    'showinfo': 0,
                    'related': 0},

                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            event.target.playVideo();
            player.mute();
            event.target.setPlaybackQuality('hd720');
        }

        function onPlayerStateChange(event) {

            if (event.data == YT.PlayerState.PLAYING ) {

            }

            if(event.data === YT.PlayerState.ENDED){
                player.loadVideoById(video_id);
            }
        }
    </script>
</div>
</body>
</html>

我在google上搜索了解决方案，但无法找到。许多内容专门用于<object>和<embed>，使用旧的youtube嵌入样式。我使用YouTube API渲染HTML5播放器。

有人能给我一个正确的方向吗？

Answer 1

播放器使用 youtube 创建视频播放的 iframe 这是一个问题，因为您无法更改跨域中对象的参数。包含视频的对象位于player.c.contentWindow.querySelector(".video-stream.html5-main-video")

现在只有解决方案是转换容器。 bg_utube 与css这样

div.bg_utube {
        position: fixed;
        z-index: -99999;
        -webkit-user-select: none;
        user-select: none;
        width: 100%;
        height: 100%;
        -ms-transform: scale(2,3);
      -webkit-transform: scale(2,3);
      transform: scale(2,3);
    }

删除嵌入youtube的黑色边框

1 个答案: