如何在全屏背景下顯示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利用先進的自定義字段插件。

所以任何人都可以告訴我如何全屏顯示視頻，並刪除左側和右側的黑色背景？

Answer 1

.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. 

Answer 2

應用視頻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>