有没有办法用 youtube 视频填充 div，比如 background-size:cover css 属性答案

【问题标题】：Is there a way to fill a div with a youtube video, like the background-size:cover css property有没有办法用 youtube 视频填充 div，比如 background-size:cover css 属性
【发布时间】：2019-12-18 06:10:58
【问题描述】：

作为用户，我希望能够定义一个 Youtube 视频来覆盖某个容器 100% 的宽度和高度。应该保持比例，所以在某些情况下，视频会被截断。

我尝试过使用 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;

我也试过这个问题Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3

我只需要视频循环播放，没有控件或播放按钮。

【问题讨论】：

您没有使用object-fit: cover; 对。请发布您的 html 和 css
嗨，Dejan，我已经发布了我在截图中使用的代码

标签： javascript jquery css wordpress youtube

【解决方案1】：

我想我找到了办法。您可能想要更改这些 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）

【讨论】：

谢谢乔伊，我认为这可行，我会试一试。