Adaptive layout, Youtube and iPhone

Question

iPhone

Good afternoon, ladies and gentlemen.

I am doing a test. One of the points is to insert a youtube video page so that its size changes depending on the screen size.
In desktop browsers, it works great at any window size.

In the iPhone browser, the following is obtained - (full size by click). What could be the reason? Code - Thanks!

Answer 1

I have the same crap in Chorme.
.video {
position: relative;
padding-bottom: 56.25%
height: 0;
overflow: hidden;
margin-bottom: 20px
padding: 10px 0 - remove this line and everything will be ok
}

Answer 2

Read it here: smartlanding.biz/adaptivnoe-youtube-video.html
There are details, and if quickly, then:

<div class="videoWrapper">;
   <iframe width="560" height="315" src="https://www.youtube.com/embed/ELYrAPHxEuI" frameborder="0" allowfullscreen&gt;&lt;/iframe>
</div>

And in css:

.videoWrapper{
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}
 
.videoWrapper iframe,.videoWrapper object, .videoWrapper embed{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}