删除 youtube 嵌入的黑色边框
Posted
技术标签:
【中文标题】删除 youtube 嵌入的黑色边框【英文标题】：Remove black borders for a youtube embed 【发布时间】：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
【参考方案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);
【讨论】：
感谢您的解决方案。这显然不是最好的解决方案，但在我有更好的解决方案之前，它现在可以解决。以上是关于删除 youtube 嵌入的黑色边框的主要内容，如果未能解决你的问题，请参考以下文章
如何摆脱嵌入在 UIWebView 中的 youtube 视频周围的白色边框？
嵌入没有任何徽标或 youtube 链接的 youtube 视频