отзывчивый iframe src param на основе размера родительского контейнера

Question

Я работаю на отзывчивой странице, где есть встроенный видеоконтент.

Как обновить ширину/высоту параметра в iframe src, а также ширину/высоту атрибута iframe, основанную на ширине родительского контейнера, а также изменить при изменении окна/ориентации?

Моя наценка:

<div class="content"> 
    <div class="video"> 
    <iframe src="http://www.foo.com/embeddedPlayer?id=4062930&width=672&height=377&autoPlay=false" width="672" height="377" border="0" frameborder="0" scrolling="no"></iframe> 
    </div> 
</div> 

Heres мои JS:

var articleBodyWidth = $('.content').width(), 
    videoUrl = $('.video'),  
    videoSrc = videoUrl.find('iframe').attr('src'), 
    iframeWidth = videoUrl.find('iframe').attr('width'), 
    iframeHeight = videoUrl.find('iframe').attr('height'); 

// function to get param in url 
function getParam(name) { 
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
    var regexS = "[\\?&]"+name+"=([^&#]*)"; 
    var regex = new RegExp(regexS); 
    var results = regex.exec(videoSrc); 
    if(results == null) { 
    return ""; 
    } else { 
    return results[1]; 
    } 
} 

var newWidth = articleBodyWidth, 
    newHeight = Math.round((iframeHeight/iframeWidth) * articleBodyWidth); 

// update iframe width and height 
videoUrl.find('iframe').attr({ 
    width: newWidth, 
    height: newHeight 
}); 

Answer 1

Я думаю, что это нужно сделать

$('.video iframe').attr('src', 'http://www.foo.com/embeddedPlayer?id=4062930&width=' + newWidth+ ' &height=' + newHeight + ' &autoPlay=false').css({ 
    width: newWidth, 
    height: newHeight 
}) 

Другим решением является использование регулярных выражений, чтобы заменить высоту и ширину в ЦСИ

function updateVideo() { 
    var src = $('.video iframe').attr('src'); 
    src = src.replace(/&width=\d+&/, '&width=' + newWidth + '&'); 
    src = src.replace(/&height=\d+&/, '&height=' + newHeight + '&'); 
    $('.video iframe').attr('src', src).attr({ 
     width: newWidth, 
     height: newHeight 
    }); 
} 

$(window).on('resize', updateVideo) 

Answer 2

Что вы должны сделать, это контролировать размер с помощью CSS.

<iframe src="http://www.foo.com/embeddedPlayer?id=4062930&width=672&height=377&autoPlay=false" border="0" frameborder="0" scrolling="no" id="video"></iframe>

<style type="text/css"> 
#video { width:100%; height:auto: } 
</style> 

Я разделся ширину и высоту от так CSS может взять на себя.

Answer 3

@kcdwayne является правильным. Вы должны поместить CSS в контролируемую страницу. Для встроенного видео единственной переменной является «высота», но если вы используете @ media-queries, вы можете установить высоту для разных размеров экрана в зависимости от изменений макета.

Вот как я хотел бы попробовать сделать это: http://tinyurl.com/a2cxfe6

Более подробную информацию о встроенной флэш-объекта здесь: http://www.aleosoft.com/flashtutorial_autofit.html