デバイスに合わせてyoutubeプレーヤーを自動的にサイズ変更することはできません

Question

私はhtml、css、jsなどで新しいです。私はデバイスの画面に合わせて自動的にYouTubeウィンドウのサイズを変更しようとしています。 私はこのウェブサイトで与えられた多くのソリューションを試しましたが、何も動作していないようです。ここ は、ビデオのためのコードの一部です

HTML

<div class="wrapper"> 
     <div class="h-iframe"> 
      <iframe class="center-block" src="https://www.youtube.com/embed/Npa-z3P1FTY" frameborder="0" allowfullscreen></iframe> 
     </div> 
</div> 

CSSあなたは、その後.h_iframe IFRAMEを呼び出すとする必要があるドント

.h_iframe iframe { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

.wrapper { 
    position: relative; 
    width: 100%; 
} 

Answer 1

これは私が使用しているものです。

/* Flexible iFrame */ 
 

 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 

 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe> 
 
</div>

live link

Answer 2

Fiddle

以下のように、.center_block（あなたのiframe内のクラスの名前）と

iframe{ 
    width: 100%; 
}