无法根据设备自动调整youtube播放器的大小

i'm new in html, css, js etc. im trying to resize a youtube window automatically to fit the screen of the device but it doesnt work for me. I have tried many solutions given in this website and nothing seems to work. Here is the part of the code for the video

我是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 {
  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%;
}

2 个解决方案

#1

This is what I use.

这就是我使用的。

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

#2

Fiddle

You don´t need to call .h_iframe iframe and then, below, call .center_block (Which is the name of the class in your iframe) and also:

您无需调用.h_iframe iframe,然后在下面调用.center_block(这是您在iframe中的类的名称)以及:

iframe{
    width: 100%;
}

#1