html - 如何在后台全屏显示 youtube 视频

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;} 

我使用了 the_field using advance custom field plugin.

谁能告诉我如何全屏显示视频并删除左右两侧的黑色背景？？

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>