删除 youtube 嵌入的黑色边框答案

【问题标题】：Remove black borders for a youtube embed删除 youtube 嵌入的黑色边框
【发布时间】：2015-07-09 22:51:32
【问题描述】：

我正在尝试在我的网站背景中嵌入一个 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>

我确实在谷歌上搜索过解决方案，但找不到任何解决方案。许多是专门为 <object> 和 <embed> 使用的，使用旧的 youtube 嵌入样式。我正在使用 YouTube API 来呈现 HTML5 播放器。

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

【问题讨论】：

你可以使用
我认为我无法控制 YouTube API 以何种方式为我的视频生成代码。目前它将成为一个 iframe。此外，<video> 标签用于加载支持格式的视频（可能因浏览器而异）。 YouTube 嵌入链接不仅仅是视频，它们是包含逻辑的网页，用于检测用户支持的内容以及他们如何使用 HTML5、flash 或其他插件播放 youtube 视频。我使用它是因为我想支持尽可能多的设备。因此，我不认为<video> 是一个选项。
标准的 youtube 嵌入确实支持更多，因为
@user1129884 我实际上只关心 Firefox / Safari / Chrome / Android（默认浏览器？）/和 iPhone（Safari/Chrome）。它们都会是 HTML5 吗？
如果您打算使用<video> 标签作为替代，请注意并非所有浏览器都支持所有视频格式。 H.264 似乎得到了最多的支持，但它作为一种免费格式的状态并不确定：en.wikipedia.org/wiki/HTML5_video#Browser_support

标签： css html youtube responsive-design

【解决方案1】：

播放器创建 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);
    }

【讨论】：

感谢您的解决方案。这显然不是最好的解决方案，但在我有更好的解决方案之前，它现在可以解决。