在一定宽度上删除 div/iframe

Question

我想让我的网站适合移动设备，但我运行遇到了一个问题。我的主页上有一个流媒体平台的播放器，通过在 CSS 中使用媒体查询，它在一定宽度上是 invisible/hidden，但它仍然被加载。

我想为任何低于 1280 像素或 768 像素的宽度完全删除此 container/iframe。

我试过 fiddle 和 jquery/javascript 有点，但它对我不起作用，我需要一些帮助 :D

这是我尝试使用的：

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

这是我要删除的container/iframe：

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

提前致谢:)

Answer 1

这是删除整个 div 和里面的 iframe 的代码。

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

但是由于您在调整大小时触发它，所以 window 宽度再次增加时是什么时候？如果您只想在较低分辨率下隐藏 iframe 并在用户调整回高分辨率时再次显示它，那么我建议使用 hide() 和 show() （或使用@Sergey Kopyrin 提出的答案)

代码示例

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

您还可以在这些方法中指定持续时间参数（例如 $("#video-container").hide(500) ），这样它就不会突然被隐藏。

Answer 2

您可以使用 media queries.

比如像这样：

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

在一定宽度上删除 div/iframe

Remove div/iframe on certain width

html

javascript

iframe

jquery

containers