I am building a homepage that automatically repositions the elements depending on the window width. The problem is that one element "player" has a YouTube video in it. I want users to be able to fullscreen the YouTube video, but after they click fullscreen the window resize is caught and that "player" element is repositioned which cancels the fullscreen. 

Also, when this homepage is viewed on mobile devices any scrolling is triggering this same function for some reason. I would like to fix both issues.

Here is the JS code:

```
$(window).resize(function() {
    var player = $('.header-11-sub .player');
    if ($(window).width() < 751) {
        $('.header-11-sub .signup-form').before(player);
        $('.header-11-sub .player-wrapper').hide();
    } else {
        $('.header-11-sub .player-wrapper').append(player);
        $('.header-11-sub .player-wrapper').show();
    }
});

```