Невозможно автоматическое изменение размера проигрывателя YouTube в соответствии с устройством

Question

Я новичок в html, css, js и т. Д. Im, чтобы автоматически изменить размер окна 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 { 
    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

вам не нужно вызывать .h_iframe IFRAME, а затем , ниже, вызовите .center_block (который является именем класса в вашем iframe), а также:

iframe{ 
    width: 100%; 
}