Wie proportionale Höhe von Youtube Iframe

Question

anordnen Ich möchte 100% Breite und proportionale Höhe für den Youtube Link verwenden.

Aber es scheint, als würde die Höhe einen falschen Wert bekommen.

Bitte helfen

 
    <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

Sie die Höhe durch die Breite teilen können die prozentuale Höhe zu erhalten, die das Seitenverhältnis des Videos darstellt, stellen Sie das Video Legen Sie in einem Element die Höhe des übergeordneten Elements auf 0 fest und weisen Sie den Prozentsatz als oberstes oder unterstes Padding zu, und stellen Sie dann sicher, dass das Iframe mit 100% Höhe und Breite absolut positioniert ist, damit es das übergeordnete Element ausfüllt. Der Elternteil ist 100% breit und die Höhe ist proportional zur Höhe des Videos. Youtube Videos sind 16: 9, also ist die Höhe% 56,25%. Hier ist ein Beispiel. Technik kommt aus diesem Artikel - 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

Sie Javascript oder jQuery verwenden können, um die Breite zu erhalten und die Höhe von dem berechnen. Die folgende Berechnung ist für einen regulären 16/9 Anteil:

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>