调整大小的视频帧

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