基于父容器大小的响应式iframe src参数

我正在制作一个响应式页面，其中有一个嵌入式视频内容。基于父容器大小的响应式iframe src参数

如何根据父容器的宽度更新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>

继承人我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 
});

来源

2013-02-26 calebo

更新了我的代码的问题：关于嵌入式闪存对象这里 http://tinyurl.com/a2cxfe6

更多信息。 – calebo 2013-02-26 02:53:40

@calebo找到我更新的答案，是否解决问题 – 2013-02-26 03:41:07

我想这应该做

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

另一种解决方案是使用正则表达式来替换高度和宽度在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)

来源

2013-02-26 03:16:59

src url是动态的。 – calebo 2013-02-26 03:21:08

@calebo查看更新的解决方案与正则表达式 – 2013-02-26 03:21:36

当我的窗口调整大小/设备方向更改时是否可以更新值？ – calebo 2013-02-26 03:41:45

什么你需要做的是用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可以接管。

来源

2013-02-26 02:47:32

不幸的是，我不能这样做，因为我收到的iframe url必须解析参数。 – calebo 2013-02-26 02:56:00

@kcdwayne是正确的。您应该将CSS控制在响应页面中。对于嵌入式视频，唯一的变量是“高度”，但如果使用@ media-queries，则可以根据布局更改为不同的屏幕尺寸设置高度。

下面是我想尝试做： http://www.aleosoft.com/flashtutorial_autofit.html

来源

2013-02-26 03:38:33 earthdesigner

我无法控制flash对象的高度/宽度，宽度和高度基于URL参数。 – calebo 2013-02-26 04:40:56

基于父容器大小的响应式iframe src参数

回答

相关问题