установка высота по отношению к ширине

Question

Как установить высоту iframe по ее ширине?

<iframe width="100%" height="auto" id="youtube" ... > 

window.onresize function() { 
    document.getElementById("youtube").style.height = this.style.width*0.63; 
} 

Я хотел бы использовать только javascript.

Answer 1

Похоже, что вы не используете window.onresize совсем правильно, пропуская знак равенства, чтобы объявить функцию ...

<iframe width="100%" height="auto" id="youtube" ... > 
window.onresize = function(event) { 
    document.getElementById("youtube").style.height = document.getElementById("youtube").style.width*0.63; 
} 

Answer 2

Вы можете создать интервал, который выполняется в фоновом режиме и обновить фрейм, который будет соответствовать.

function autoAdjustWidth(){ 
    var frm=document.getElementById('myFrame'); 
    console.log(frm.offsetWidth); 
    frm.height=frm.offsetWidth; 
} 
autoAdjustWidth(); 
window.setInterval(autoAdjustWidth,300); 

См. jsfiddle.

Answer 3

Ваш пример выглядит почти правильно с некоторыми изменениями:

// using = 
window.onresize = function() { 
    var iFrame = document.getElementById("youtube"); 
    // use iFrame width instead of "this" which is the windows width 
    iFrame.style.height = iFrame.style.width; 
} 

Answer 4

var player = null; 
$(document).ready(function() { 
    resizeHeroVideo(); 
}); 

$(window).resize(function() { 
    resizeHeroVideo(); 
}); 

function resizeHeroVideo() { 
    var content = $('#hero'); 
    var contentH = viewportSize.getHeight(); 
    contentH -= 158; 
    content.css('height',contentH); 

    if(player != null) { 
     var iframe = $('.videoWrapper iframe'); 
     var iframeH = contentH - 150; 
     if (isMobile) { 
      iframeH = 163; 
     } 
     iframe.css('height',iframeH); 
     var iframeW = iframeH/9 * 16; 
     iframe.css('width',iframeW); 
    } 
} 

Complete gist here.Live example here.