youtube videoをフルスクリーンでバックグラウンドで表示するには

Question

でyoutube videoを追加しましたが、フルスクリーンではありません。

左側と右側にはまだ黒い背景があります。

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