删除嵌入youtube的黑色边框

Question

删除嵌入youtube的黑色边框

cpb*_*pb2 10 html css youtube html5 responsive-design

我想在我的网站背景上嵌入一个YouTube视频.我有这个工作,它是响应,除了当我的嵌入视频是宽屏(16:9),但我的视口是例如方形(1:1),它创建黑色边框,以补偿剩余的空间.

在此输入图像描述

我想知道是否有裁剪视频的选项,以便视频的"中心"始终在屏幕上,就像上面的示例图片一样.剩下的部分将被切断.我认为图像的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>

Run Code Online (Sandbox Code Playgroud)

我在谷歌搜索解决方案,但找不到任何解决方案.许多都专门用于<object>和<embed>使用旧的youtube嵌入式.我正在使用YouTube API来呈现HTML5播放器.

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

Answer 1

Dus*_*tic 6

播放器创建iframe,其中视频与youtube一起播放这代表一个问题,因为您无法更改跨域中对象的参数.包含视频的对象在player.c.contentWindow.querySelector(".video-stream.html5-main-video")

我现在只有解决方案是转换容器.像这样的css的bg_utube

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);
    }

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	12241 次
最近记录：	8 年，11 月前