Come si impedisce a tutti i video di ricaricarsi quando si verifica un evento sul carosello di Slick?

Question

Sto utilizzando il plug-in Carousel Slick per creare un carosello di video che gli utenti possono aggiungere, rimuovere e filtrare. Il problema che ho è che ogni volta che un utente fa un evento (aggiungi/rimuovi/filtro), tutti i video caricati sul carosello ricaricano, il che dà una sensazione goffa.

ho trovato che la ricarica può essere interrotta se vado in slick.js e commento fuori `_ $ slidesCache = _ $ diapositive;..` `, Ma che rompe la funzione di filtraggio c'è un modo per evitare il ricarico pur mantenendo tutte le funzioni?

JSFiddle: http://jsfiddle.net/neowot/eoov2ud1/37/

Javascript

$(document).ready(function(){ 
    var slideId = 0; 
    var slides = []; 
    $('.add-remove').slick({ 
     slidesToShow: 3, 
     slidesToScroll: 3 
    }); 

    var target = '<div class="videowrapper"><iframe src="https://www.youtube.com/embed/7WgYmnwO-Pw" frameborder="0" allowfullscreen></iframe></div>'; 

    $('.js-add-FirstClass-slide').on('click', function() {   
     $('.add-remove').slick('slickAdd','<div class="FirstClass" slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>'); 
     slides.push(slideId); 
     slideId++; 
    }); 

    $('.js-add-SecondClass-slide').on('click', function() { 
     $('.add-remove').slick('slickAdd','<div class="SecondClass" slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>'); 
     slides.push(slideId); 
     slideId++; 
    }); 

    var filtered = false; 

    $('.ToggleFirstClass').on('click', function() { 
     if (filtered === false) { 
      $('.add-remove').slick('slickFilter', $('.FirstClass')); 
      filtered = true; 
     } else { 
      $('.add-remove').slick('slickUnfilter'); 
      filtered = false; 
     } 
    }); 

    $('.ToggleSecondClass').on('click', function() { 
     if (filtered === false) { 
      $('.add-remove').slick('slickFilter','.SecondClass'); 
      filtered = true; 
     } else { 
      $('.add-remove').slick('slickUnfilter'); 
      filtered = false; 
     } 
    }); 

    $('body').on('click', '.sliderX', function() { 
     var id = parseInt($(this).closest("div").attr("slide-id"), 0); 
     var index = slides.indexOf(id); 
     $('.add-remove').slick('slickRemove', index); 
     slides.splice(index, 1); 
    }); 
}); 

slick.JS snippet

Slick.prototype.addSlide = Slick.prototype.slickAdd = function(markup, index, addBefore) { 
    var _ = this; 

    if (typeof(index) === 'boolean') { 
     addBefore = index; 
     index = null; 
    } else if (index < 0 || (index >= _.slideCount)) { 
     return false; 
    } 

    _.unload(); 

    if (typeof(index) === 'number') { 
     if (index === 0 && _.$slides.length === 0) { 
      $(markup).appendTo(_.$slideTrack); 
     } else if (addBefore) { 
      $(markup).insertBefore(_.$slides.eq(index)); 
     } else { 
      $(markup).insertAfter(_.$slides.eq(index)); 
     } 
     } else { 
     if (addBefore === true) { 
      $(markup).prependTo(_.$slideTrack); 
     } else { 
      $(markup).appendTo(_.$slideTrack); 
     } 
    } 

    _.$slides = _.$slideTrack.children(this.options.slide); 

    _.$slideTrack.children(this.options.slide).detach(); 

    _.$slideTrack.append(_.$slides); 

    _.$slides.each(function(index, element) { 
     $(element).attr('data-slick-index', index); 
    }); 

    _.$slidesCache = _.$slides; 

    _.reinit(); 
}; 

Answer 1

Più una soluzione che una risposta: invece di caricare l'iframe, è possibile mostrare il youtube thumbnail in un Tag <img>.

Quando l'utente fa clic su di esso, carica l'iframe correlato e riproduce automaticamente il video.

Per me la sensazione goffo è andato: http://jsfiddle.net/eoov2ud1/40/ (ma ha bisogno di qualche stile per mostrare che si tratta di un video riproducibile, con alcuni CSS)

Modifica e in realtà, è possibile creare l'iframe al di fuori del carousel DOM, in modo che diventi indipendente da esso: http://jsfiddle.net/eoov2ud1/48/

Quindi potrebbe continuare a essere riprodotto, anche se il video è filtrato/nascosto/rimosso (con alcuni JS aggiuntivi, è anche possibile interrompere il video quando si rileva che era rimosso)