javascript - How to arrange proportional height of youtube iframe - Stack Overflow

admin管理员组

文章数量:1300026

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=".4.5/jquery.mobile-1.4.5.min.css" />
<script src=".11.1.min.js"></script>
<script src=".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=""></iframe>
        </div>
       
    </div>

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./mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script src="http://code.jquery./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./embed/sR_G6XXZaNI"></iframe>
        </div>
       
    </div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 28, 2017 at 12:43 Johannes 67.8k2222 gold badges8484 silver badges139139 bronze badges asked Feb 27, 2017 at 23:17 NoWarNoWar 37.7k8282 gold badges338338 silver badges515515 bronze badges 1

• Possible duplicate of Maintain the aspect ratio of a div with CSS – Joschua Schneider Commented Feb 28, 2017 at 13:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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 es from this article - https://css-tricks./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./embed/sR_G6XXZaNI"></iframe>
</div>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery./mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery./jquery-1.11.1.min.js"></script>
<script src="http://code.jquery./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./embed/sR_G6XXZaNI"></iframe>
        </div>
       
    </div>

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.

本文标签： javascriptHow to arrange proportional height of youtube iframeStack Overflow