作为用户，我希望能够定义 Youtube 视频以覆盖某个容器 100% 宽度和高度。应保持比例，因此在某些情况下，视频会被 chop 。
我尝试过使用 object-fit:cover，但是当将 Youtube 视频作为 iframe 嵌入时，播放器以 100% 的宽度和高度完美显示，但视频被缩放以适合宽度，然后我得到顶部和底部的黑条。
这是PHP
else if($youtube_video AND is_admin() === false) {
echo '<div class="media-container ' . $shrink . ' ' . $mediaplacement . '">' .
'<iframe class="video" type="text/html" src="' . $youtube_video . '?autoplay=1&mute=1&loop=1&modestbranding=1&playsinline=1&rel=0" frameborder="0"></iframe>' .
'</div>';
}
然后是CSS
& .video{
object-fit: cover;
width:100%;
height:100%;
}
& .media-container{
position:absolute;
top:0;
right:0;
width:50%;
height:100%;
background-repeat: no-repeat;
我只需要视频循环播放，不需要控件或播放按钮。
最佳答案
我想我找到了一个方法。您可能想要更改这些 CSS 值，因为它非常繁琐并且可能不适合您的需要。它循环播放，视频处于静音状态，并且没有控件/标题。看一看。要删除参数，请将它们从 iframe 源中删除。
<!DOCTYPE html>
<style>
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0px;
left: 0px;
width: 80%;
height: 80%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
</style>
<html>
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/0LjMhy0w8xs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</html>
我希望这已经回答了您的问题。如果还不能满足您的需求，请回复! 编辑:我认为您实际上不需要 PHP 来执行此操作...
谢谢， 老鼠(乔伊·M)
关于javascript - 有没有办法用 youtube 视频填充 div，比如背景大小 :cover css property，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57448049/