title: Resize video frame after flipping phone to the landscape mode
body: <p>This is an url of video</p>
  
  <pre><code>&lt;iframe src="http://xxxx.com/embed-xxx-720x405.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="720" height="405"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>I got this JS to change width and height in url from 640px:</p>
  
  <pre><code>$(window).on("load", function(event){
      var w = $(this).width() -50;
      if(w &lt;= 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'));
          })
  });
  </code></pre>
  
  <p>It works with loading a website, but I need that it should work when I flip my phone on landscape so people don't need to refresh the page.</p>
  
  <p>Resize function doesnt work, it should be something like that </p>
  
  <pre><code>if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
          window.addEventListener("orientationchange", function() {
              rvlWidth(w);
          }, false);
  </code></pre>
  
  <p>But I dont know how to do it, do you have any solutions for that?</p>