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

あなたがしなければならないことは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 に答える
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

埋め込まれたフラッシュオブジェクトの詳細については、http： //www.aleosoft.com/flashtutorial_autofit.htmlをご覧ください。

于 2013-02-26T03:38:33.893 に答える