我正在开发一个响应页面,其中包含嵌入的视频内容。
如何根据父容器的宽度更新iframe src中的参数width/height以及iframe属性width/high,以及在窗口/方向更改时进行更改?
我的标记:
<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>
这是我的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
});
我认为这应该做
$('.video iframe').attr('src', 'http://www.foo.com/embeddedPlayer?id=4062930&width=' + newWidth+ ' &height=' + newHeight + ' &autoPlay=false').css({
width: newWidth,
height: newHeight
})
另一个解决方案是使用regex替换src-中的高度和宽度
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)
您要做的就是用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>
我去掉了<iframe>
的宽度和高度,这样CSS就可以接管它了。
@kcdwayne是对的。您应该将CSS置于响应页面的控件中。对于嵌入式视频,唯一的变量是"高度",但如果使用@media查询,则可以根据布局变化为不同的屏幕大小设置高度。
以下是我尝试的方法:http://tinyurl.com/a2cxfe6
有关嵌入式flash对象的更多信息,请点击此处:http://www.aleosoft.com/flashtutorial_autofit.html