我想在我的网站背景中嵌入一个 YouTube 视频。我有这个工作并且它是响应式的，除了当我的嵌入视频是宽屏 (16:9) 但我的视口(viewport)是例如正方形 (1:1) 时，它会创建黑色边框以补偿剩余空间。
我想知道是否有裁剪视频的选项，以便视频的“中心”始终位于屏幕中，就像上面的示例图像一样。剩下的部分将被切断。我认为图像的 CSS 等价物是 background-size: cover; .
这是我目前的代码。试着让你的视口(viewport)正方形，你会看到黑色的边框。它也可以在 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 播放器。
有人能给我一个正确的方向吗？
最佳答案
播放器创建 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);
}
关于css - 删除 youtube 嵌入的黑色边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29964291/