How to arrange proportional height of youtube iframe

Question

I want to use 100% width and proportional height for the youtube link.

But it seems like height gets incorrect value.

Please help

  
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  
  
  <div data-role="tabs" id="tabs">
        <div data-role="navbar">
            <ul>
                <li><a href="#one" class="ui-btn-active" data-ajax="false">Film</a></li>
                <li><a href="#two" data-ajax="false">Trailer</a></li>
 
            </ul>
        </div>
        <div id="one">
          <br />   
        
            
        </div>
        <div id="two">
            <br />   
            <iframe  style="width:100%; border: none"
                    src="https://www.youtube.com/embed/sR_G6XXZaNI"></iframe>
        </div>
       
    </div>

Answer 1

You can divide the height by the width to get the percentage height that represents the aspect ratio of the video, put the video in an element, set the parent element's height to 0 and assign the percentage as top or bottom padding, then make the iframe absolutely positioned with 100% height and width so it fills the parent. The parent will be 100% width with height proportional to the video's height. Youtube videos are 16:9, so the height % is 56.25%. Here's an example. Technique comes from this article - https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

body {margin:0;}
.videoContainer {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  width:100%;
}
.videoContainer iframe {
  position: absolute;
  top: 0; left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

<div class="videoContainer">
<iframe src="https://www.youtube.com/embed/sR_G6XXZaNI"></iframe>
</div>

Answer 2

You can use Javascript or jQuery to get the width and calculate the height from that. The following calculation is for a regular 16/9 proportion:

var filmwidth = $('#two iframe').width();
var filmheight = filmwidth / 16 * 9;
$('#two iframe').height(filmheight);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  
  
  <div data-role="tabs" id="tabs">
        <div data-role="navbar">
            <ul>
                <li><a href="#one" class="ui-btn-active" data-ajax="false">Film</a></li>
                <li><a href="#two" data-ajax="false">Trailer</a></li>
 
            </ul>
        </div>
        <div id="one">
          <br />   
        
            
        </div>
        <div id="two">
            <br />   
            <iframe style="width:100%; border: none"
                    src="https://www.youtube.com/embed/sR_G6XXZaNI"></iframe>
        </div>
       
    </div>

Answer 3

This has been asked multiple times before.

The most helpful awnser in my eyes is found in this Question:

Maintain the aspect ration of a div with css

As it includes all different percentages for different aspect ratios.

The solution is to use a padding-top value as mentioned.