Owl Carousel 2 Videos dynamisch hinzufügen

Question

Ich versuche dynamisch hinzufügen Owl Carousel Videos auf meiner Website, aber ich stieß auf ein Problem; Videos auf der Seite erscheinen, aber wenn ich versuche, ihnen Konsole zu spielen, sagen

TypeError: video is undefined 
    width = video.width || '100%' 

Ich habe versucht, Anweisungen auf Owl Carousel Dokumentation http://www.owlgraphic.com/owlcarousel/demos/manipulations.html und einige Beiträge hier auf Stackoverflow, kann aber nicht diese heraus gefunden zu folgen. Es gibt nicht viele, wenn überhaupt, Dokumentation darüber, wie Videos in Owl Carousel dynamisch hinzugefügt werden.

Mein aktueller Code folgt:

<script> 
//init carousel 
var owl = $('.owl-carousel'); 
$(document).ready(function(){ 
    owl.owlCarousel({ 
    touchDrag: true, 
    startPosition: 1, 
    merge:true, 
    margin:10, 
    video:true, 
    center:true, 
    responsive:{ 
     320:{ 
     items:1 
     }, 
     900:{ 
     items:3 
     } 
    } 
    }); 

    var html = `<div data-merge="1" class="item-video"> 
       <div class="owl-video-wrapper"> 
        <a class="owl-video" href="https://www.youtube.com/watch?v=dOWFVKb2JqM" style="display: none;"></a> 
        <div class="owl-video-play-icon"></div> 
        <div class="owl-video-tn" style="opacity:1;background-image:url(http://img.youtube.com/vi/dOWFVKb2JqM/hqdefault.jpg)"></div> 
       </div> 
       </div>`; 
    var content = '<div class="owl-item" data-video="https://www.youtube.com/watch?v=dOWFVKb2JqM">'+html+'</div>'; 
    owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel'); 
}); 
</script> 

ich auch sie wie folgt hinzuzufügen versucht:

var content = `<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a></div>`; 
owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel'); 

Meine Idee später ist zu Video-URLs von Ghost CMS API zu holen und initiieren Owl Karussell Videos mit diesen Daten. Hilfe dazu sehr geschätzt!

Answer 1

Ich habe es funktioniert mit anderen Ansatz; Fügen Sie Videos dynamisch als iframe-embeds hinzu.

Das habe ich jetzt und alles funktioniert. lazyYT ist jQuery-plugin zum laden von Youtube-Videos. https://github.com/tylerpearson/lazyYT

var content = `<div data-merge="1" class="item-video"> <div class="lazyYT" data-youtube-id="`+parsedUrl+`" data-ratio="16:9"></div></div>` // Add video to carousel owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel').trigger('to.owl.carousel', 1);

Ich wollte nur damit Sie wissen, und vielleicht für jemand seine nützlich. :)