Question

我在背景中添加了youtube视频，但仍然没有全屏显示。

在左侧和右侧，我仍然是黑色背景。

这是我的代码：

<section class="banner-video">
    <div class="banner-video-inner">
       <iframe height="100%" width="100%" src="https://www.youtube.com/embed/<?php the_field('banner_video_link');?>?autoplay=1" frameborder="0" allowfullscreen></iframe>
    </div>
</section>


.banner-video{position: relative; z-index: 0; width:100%; height:650px;}
.banner-video-inner{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; z-index: 2;}

我使用了高级自定义字段插件。

所以任何人都可以告诉我如何全屏显示视频并删除左侧和右侧黑色背景??

Answer 1

将视频应用于video代码并从以下代码添加CSS：

body {
  margin: 0;
  background: #000;
}
video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
}

<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
  <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>

Answer 2

.banner-video{position: relative; z-index: 0; width:100%; height:759px;}

@media only screen and (min-width:1400px){
.banner-video{height:843px;}
}

@media only screen and (min-width:1520px){
.banner-video{height:948px;}
}

@media only screen and (max-width:1199px){
.banner-video {height:576px;}
}

@media only screen and (max-width: 992px){
.banner-video {height:432px;}
}

@media only screen and (max-width: 640px){
.banner-video {height:318px;}
}

@media only screen and (max-width: 400px){
.banner-video {height: 180px;}
}

Finally This Works for me. Got the video in full screen.

如何在全屏幕背景下显示YouTube视频

2 个答案: