Question

我正在使用FitVids来播放视频。我像这样实例化它：

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

我希望fitVids()应用于屏幕尺寸低于480px的某个特定元素，并且我已经实现了这一点。但是出于显示目的，如果用户调整浏览器大小来检查显示器的宽度，我还需要fitVids()才能应用，我已经完成了这样的事情

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

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

那么有没有办法删除我调用元素的fitVids()？

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

Answer 1

以下内容将删除父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父节点中，如果视频已播放，它将停止。

Answer 2

哈姆雷特代码是一个好主意，但它假设您的选择器中只有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);
    })
};

Answer 3

您可以简单地使用：

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

但是“ .fluid-width-video-wrapper”会在延迟（在加载文档后）后应用，因此您可以在延迟后触发该功能

setTimeout(function () {
  $(".fluid-width-video-wrapper iframe").unwrap()
}, 300);

有没有办法在应用后从元素中删除fitVids（）？

3 个答案: