Question

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

如何根据父容器的宽度更新iframe src中的参数width / height以及iframe属性width / height，以及窗口/方向何时更改时更改？

我的加价：

<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
});

Answer 1

您需要做的是使用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可以接管。

Answer 2

我认为应该这样做

$('.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)

Answer 3

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

以下是我尝试这样做的方法： http://tinyurl.com/a2cxfe6

有关嵌入式Flash对象的更多信息，请访问： http://www.aleosoft.com/flashtutorial_autofit.html

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

3 个答案: