OwlCarousel Youtube video not showing

user2252219 picture user2252219 · Jan 16, 2016 · Viewed 8.5k times · Source

I have a youtube video that I want shown but it doesn't show at all. I didn't add a height or width to video because I want to keep it responsive.

http://www.owlcarousel.owlgraphic.com/demos/video.html

<div id="carousel" class="owl-carousel">
  <div>
    <a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
  </div>
  <div><img src="http://cdn.playbuzz.com/cdn/7a7a5814-ed79-410c-b748-db6a24f73f0b/4d71c010-f930-4334-ba62-79d87a7ddef4.jpg"></div>

</div>

http://jsfiddle.net/nLz17fcv/12/

Answer

Sapikelio picture Sapikelio · Jan 18, 2016

Adding a video using a tag Seems not working.

<div>
    <a class="owl-video" href="https://www.youtube.com/watch?v=Oy9GFAQ4x4w"></a>
</div>

Instead it you can replace it by Iframe to embed the video you want like this.

<div class="item-video">
   <iframe width="420" height="315" src="https://www.youtube.com/embed/Oy9GFAQ4x4w">
   </iframe>
</div>

In addition to, I've removed transitionStyle: "fade" because this property blocks the carrousel transition.

You can check it on this DEMO

Hope It Helps