0

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

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

3 回答 3

0

我认为这应该做

$('.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-26T03:16:59.063 回答
0

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

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

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

于 2013-02-26T03:38:33.893 回答
0

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

于 2013-02-26T02:47:32.303 回答