CODEWITHSUNDEEP
javascriptjqueryvideoowl-carousel
user2252219
user2252219

Reputation: 865

OwlCarousel Youtube video not showing

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/

Upvotes: 5

Views: 11984

Answers (2)

abhimanyu
abhimanyu

Reputation: 11

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.com/embed/' + video.id );
} 
else if (video.type === 'vimeo') {
html.attr( 'src', 'https://player.vimeo.com/video/' + video.id );
}
</pre>

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

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

Upvotes: 1

Sapikelio
Sapikelio

Reputation: 2604

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

Upvotes: 5

Related Questions