調整大小的視頻幀

Question

這是視頻的網址

<iframe src="http://xxxx.com/embed-xxx-720x405.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="720" height="405"></iframe> 

我得到這個JS寬度和高度的網址以改變從640像素：

$(window).on("load", function(event){ 
    var w = $(this).width() -50; 
    if(w <= 640) 
     $('.videoimg iframe').each(function() { 
      $(this).attr('src', $(this).attr('src').replace('720', '' + w + '')); 
      $(this).attr('src', $(this).attr('src').replace('405', '305')); 

      $(this).attr('width', $(this).attr('width').replace('720', '' + w + '')); 
      $(this).attr('height', $(this).attr('height').replace('405', '305')); 
     }) 
}); 

它與加載一個網站，但我需要，它應該工作時，我在橫向翻轉手機，所以人們不需要刷新頁面。

大小功能不工作，它應該是類似的東西

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
     window.addEventListener("orientationchange", function() { 
      rvlWidth(w); 
     }, false); 

但我不知道如何做到這一點，你有任何的解決方案？

Answer 1

好像旋轉事件的「負荷」事件被觸發+「W」是不是在上下文中定義（至少在firest時間）

嘗試收集代碼爲以下

之前設置

var onRotateCallback = function() { 
    var screenWidth = $(window).width() - 50; 
    var videoFrames = $('.videoimg iframe'); 
    if (screenWidth <= 640) { 
     videoFrames.each(function() { 
      var frame = $(this); 
      var originalSRC = $(this).attr('src'); 
      var newSRC = originalSRC.replace('720', screenWidth).replace('405', '305'); 
      frame.attr('src', newSRC); 
      frame.attr('width', screenWidth); 
      frame.attr('height', '350'); 
     }); 

    } 
}; 

$(window).on("load", function(e) { 
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
     onRotateCallback(); 
     $(window).on("resize", function() { 
      onRotateCallback(); 
     }); 
    } 
});