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

responsive iframe src param based on parent container size

本文关键字：响应 iframe src 参数 于父容      更新时间：2023-09-26

我正在开发一个响应页面，其中包含嵌入的视频内容。

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

相关文章：