Remove div/iframe on certain width

Question

I want to make my site mobile friendly but I run into one problem. I have an player of a streaming plattform on my main page, which is invisible/hidden on a certain width by using media queries in CSS, but it still gets loaded.

I want to remove this container/iframe completly for any width lower than 1280px or 768px.

I've tried to fiddle around with jquery/javascript a bit but it's not working for me and I need some help :D

This is what I tried to use:

$(window).resize(function() {
        if ($(window).width() < 1280) {
            $(container_selector).document.getElementById("video-container"){
                this.pause();
                delete(this);
                $(this).remove();
            });
            $(container_selector).empty();
        }
    });

This is the container/iframe I want to remove:

<div id="video-container"><iframe src="http://www.hitbox.tv/embed/kazuto" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Thanks in advance :)

Answer 1

You can use media queries .

For instance, like this:

@media (max-width: 1280px) {
  #video-container {
    display: none;
  }
}

Answer 2

Here is the code to remove the whole div and the iframe inside.

$(window).resize(function () {
    if ($(this).width() < 1280) {
        $("#video-container").remove();
    }
});

But since you trigger it on resize, what's when the window width increases again? If you just want to hide the iframe on lower resolutions and show it again when user resizes back to higher resolution, then I would recommend to use hide() and show() (or use the answer proposed by @Sergey Kopyrin)

Code sample

$(window).resize(function () {
    if ($(this).width() < 1280) {
        $("#video-container").hide();
    } else{
        $("#video-container").show();
    }
});

You can also specify a duration parameter inside those methods (eg $("#video-container").hide(500) ) so it will not be hidden abruptly.