0

This is an url of video

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

I got this JS to change width and height in url from 640px:

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

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.

Resize function doesnt work, it should be something like that

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

But I dont know how to do it, do you have any solutions for that?

Valentin Mercier
  • 5,256
  • 3
  • 26
  • 50
  • possible duplicate of [JQuery execution on window resize?](http://stackoverflow.com/questions/9828831/jquery-execution-on-window-resize) – James G. Jul 26 '14 at 21:08

1 Answers1

0

It seems like the rotation event is set before the 'load' event is fired + 'w' is not defined in the context (at least on the firest time)

try gather the codes as the following

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();
        });
    }
});
Adi Darachi
  • 2,137
  • 1
  • 16
  • 29