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.

.html

<div id="carousel" class="owl-carousel">
  <div>
    <a class="owl-video" href=""></a>
  </div>
  <div><img src=".jpg"></div>

</div>

/

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./demos/video.html

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

</div>

http://jsfiddle/nLz17fcv/12/

• javascript
• jquery
• video
• owl-carousel

2 Answers 2

Adding a video using a tag Seems not working.

<div>
    <a class="owl-video" href="https://www.youtube./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./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

In my case the error were with the URL that was being generated while creating iframe, I placed "https://" in front of Youtube iframe and changed few things as (Added "https:")

<pre>
if (video.type === 'youtube') {
html.attr( 'src', 'https://www.youtube./embed/' + video.id );
} 
else if (video.type === 'vimeo') {
html.attr( 'src', 'https://player.vimeo./video/' + video.id );
}
</pre>

One more thing I did for vimeo video was added "https:"

<pre>
url: 'https://vimeo./api/v2/video/' + video.id + '.json',
</pre>