Abe Gold Abe Gold - 6 months ago 16
HTML Question

Can't automatic resize youtube player according to device

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

<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

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