Owl Carousel 2 동적으로 동영상 추가

Question

동적으로 올빼미 회전식 동영상을 내 사이트에 추가하려고하지만 문제가 발생했습니다. 비디오 페이지에 표시하지만 그들에게 콘솔을 재생하려고하면 나는 올빼미 회전 목마 문서 http://www.owlgraphic.com/owlcarousel/demos/manipulations.html 여기에 유래에 대한 몇 가지 게시물에서 발견 지침을 따르려고 노력했지만,이 알아낼 수 없습니다

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

을 말한다. 올빼미 회전식 메뉴에 동영상을 동적으로 추가하는 방법에 대한 문서는 많지 않습니다.

내 현재 코드는 다음입니다 :

<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> 

나는이 같은 추가하려고 :

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'); 

내 생각은 나중에 올빼미 회전 목마를 고스트 CMS의 API에서 동영상 URL을 가져오고 시작하는 것입니다 이 데이터가있는 동영상 이것에 대한 도움말은 매우 높이 평가되었습니다!

Answer 1

다른 접근법을 사용하여 작업을했습니다. 동적으로 동영상을 iframe 삽입으로 추가하십시오.

이것은 내가 지금 얻은 것입니다. lazyYT는 lazy-loading youtube-videos 용 jQuery 플러그인입니다. 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);

https://github.com/tylerpearson/lazyYT

그냥 당신이 알고있는 누군가를위한 아마 그 유용하게 싶었다. :)