2

我正在将FitVids用于响应式视频。我这样实例化它：

$("#thing-with-videos").fitVids();

我想fitVids()应用于屏幕尺寸低于 480 像素的特定元素，并且我已经实现了这一点。但是，出于显示目的fitVids()，如果用户调整浏览器的大小以检查小宽度的显示，我还需要应用，并且我已经完成了类似这样的操作

jQuery(window).resize( function(){
    $("#other-thing-with-videos.small_width").fitVids();            
});

... 工作正常，但是，fitVids()似乎应用于引用的 DOM 元素，而不是像我首先想到的引用类，这意味着删除类（对于更宽的屏幕尺寸）不会删除fitVids()就像我想的那样。

那么有什么方法可以删除fitVids()我在元素上调用的内容吗？

编辑 - 我想知道unbind方法是否可以用于此？

4

3 回答 3

3

以下将删除父 div 的类和任何样式：

$('#container').fitVids();
$("#btn").click(function () 
{
    $(".fluid-width-video-wrapper").removeClass("fluid-width-video-wrapper").removeAttr("style");
});

这几乎消除了 FitVid 效应。

jsFiddle：http: //jsfiddle.net/hescano/m6Jwx/1/

编辑：我认为这个解决方案效果更好：

$.fn.unFitVids = function () {
    var id = $(this).attr("id");
    var $children = $("#" + id + " .fluid-width-video-wrapper").children().clone();
    $("#" + id + " .fluid-width-video-wrapper").remove(); //removes the element
    $("#" + id).append($children); //adds it to the parent
};

你只需像这样从你的元素中调用它：

$("#myDiv").unFitVids();

jsFiddle：http: //jsfiddle.net/hescano/m6Jwx/2/

我能看到的唯一缺点是，因为我从 DOM 中删除了元素，克隆了它们，并将它们放在 div 父级中，如果视频已经在播放，它将停止。

于 2013-04-12T00:40:06.530 回答
1

Hanlets 代码是个好主意，但它假设您的选择器中只有 1 个视频。

下面的扩展代码循环遍历所有视频

$.fn.unFitVids = function () {
    $.each(this, function(i, el){
        var $wrapper = $(".fluid-width-video-wrapper", el),
            $children = $wrapper.children().clone();
        $wrapper.remove();
        $(el).append($children);
    })
};
于 2014-05-27T15:35:40.110 回答
0

您可以简单地使用：

$(".fluid-width-video-wrapper iframe").unwrap();

但是“.fluid-width-video-wrapper”在一些延迟后应用（在文档加载之后），所以你可以在一些延迟后触发该功能

setTimeout(function () {
  $(".fluid-width-video-wrapper iframe").unwrap()
}, 300);
于 2018-12-06T11:33:22.880 回答