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

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

javascript jquery css wordpress youtube

Javascript 有没有办法用youtube视频填充div，比如background size:cover css属性,javascript,jquery,css,wordpress,youtube,Javascript,Jquery,Css,Wordpress,Youtube,作为一个用户，我希望能够定义一个Youtube视频，以100%覆盖某个容器的宽度和高度。比例应该保持不变，因此在某些情况下，视频会被切断我试过使用object fit:cover，但当将Youtube视频嵌入iframe时，播放器的宽度和高度都达到了100%，但视频会按宽度进行缩放，然后在顶部和底部显示黑色条这里是PHP else if($youtube_video AND is_admin() === false) { echo '<di

作为一个用户，我希望能够定义一个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值，因为它非常复杂，可能不适合您的需要。它循环，视频处于静音状态，并且没有控件/标题。看一看。要删除这些参数，请从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>


*{框大小：边框框；}
.视频背景{
背景：#000；
位置：固定；
顶部：0；右侧：0；底部：0；左侧：0；
z指数：-99；
}
.视频前景，
.视频背景iframe{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：80%；
身高：80%；
指针事件：无；
}
@介质（最小纵横比：16/9）{
.视频前景{高度：300%；顶部：-100%；}
}
@介质（最大纵横比：16/9）{
.视频前景{宽度：300%；左侧：-100%；}
}
@全部和全部介质（最大宽度：600px）{
.vid信息{宽度：50%；填充：.5rem；}
.vid info h1{页边距底部：.2rem；}
}
@全部和全部介质（最大宽度：500px）{
.vid info.acronym{display:none；}
}

我希望这已经回答了你的问题。如果仍然不能满足您的需求，请回复！编辑：我不认为你真的需要PHP来做这件事

谢谢，

Rat（Joey M）

您没有使用

对象匹配：封面对。请发布你的html和cssHi Dejan，我已经发布了我在截图中使用的代码Hanks Joey，我认为这是可行的，我来试一试。
<!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>