Nav elements in carousel with class item-video and video tags

[hidroxid]

Hello

If I use the carousel with elements of the class “item-video” and with the tag video, I can’t have the buttons on the sides or points below to navigate between the different videos available?

In addition to the above, what is the actual function of data-merge=”3″? I have done various tests and I cannot understand very well. Sorry.

<div class="owl-carousel owl-theme manual" id="videos">

<div class="item-video" data-merge="3" style="height: 347px;">
<video controls preload="auto" width="100%" height="347" poster="" data-description="Info">
<source src="video/prueba1.mp4" type='video/mp4'/>
</video>
</div>

<div class="item-video" data-merge="3" style="height: 347px;">
<video controls preload="auto" width="100%" height="347" poster="" data-description="Info">
<source src="video/prueba2.mp4" type='video/mp4'/>
</video>
</div>
</div>

---

Template Version: 8.3.0

[Support]

Hello,

This type of carousel do not accepts html tag <video> inside. The only way is defining a link inside the item video. For example:

<div class="owl-carousel owl-theme manual" id="videos">
	<div class="item-video" data-merge="3"><a class="owl-video" href="http://vimeo.com/67957799"></a></div>
	<div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oNBBijn4JuY"></a></div>
	<div class="item-video" data-merge="2"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div>
	<div class="item-video" data-merge="1"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div>
	<div class="item-video" data-merge="2"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div>
	<div class="item-video" data-merge="3"><a class="owl-video" href="https://www.youtube.com/watch?v=oNBBijn4JuY"></a></div>
	<div class="item-video" data-merge="1"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div>
	<div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=oNBBijn4JuY"></a></div>
</div>

* Only YouTube, Vimeo or Vzaar video links are accepted.

We use the plugin Owl Carousel for this type of carousel and here’s the documentation:
https://owlcarousel2.github.io/OwlCarousel2/demos/video.html

Regarding data-mege, this is the size of the specific item where it’s defined the attribute. Play with the values to see the changes.

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[hidroxid]

Hello!

I took the code from the following article: https://www.okler.net/forums/topic/carousel-video-from-local-storage/

Not valid then?
I will have any trouble with it?

In the tests it is working perfectly for me, I only have the doubt if I can place the pointers to navigate or not.

Thanks!

---

[Support]

Hello,

Oh, really you are right, sorry! That’s definitely is an way to use HTML videos within this video carousel.

Please try with this example of code:

<div class="owl-carousel owl-theme manual nav-style-1 nav-outside" id="videos">
	<div class="item-video" data-merge="3" style="height: 347px; background-color: #000;">
		<video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
		</video>
	</div>
	<div class="item-video" data-merge="2" style="height: 347px; background-color: #000;">
		<video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
		</video>
	</div>
	<div class="item-video" data-merge="1" style="height: 347px; background-color: #000;">
		<video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
		</video>
	</div>
	<div class="item-video" data-merge="1" style="height: 347px; background-color: #000;">
		<video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
		</video>
	</div>
	<div class="item-video" data-merge="1" style="height: 347px; background-color: #000;">
		<video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
		</video>
	</div>
	<div class="item-video" data-merge="1" style="height: 347px; background-color: #000;">
		<video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet">
			<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
		</video>
	</div>
</div>

* Note the video with data-merge=”3″ renders properly since the aspect ratio/size of the video is compatible with the data-merge=”3″ size.
* The others videos render centered. There’s 3 options here, the first is maintain the style “background-color: #000;” so the video will stay centered. The second is change the data-merge=”xx” value according to video size/aspect ratio. The third is change the video aspect ratio to fit with data-merge=”1″.

Regarding navigation arrows, not the class I added nav-style-1 nav-outside. I notice a bug when we add navigation arrows to this specific video carousel, where two arrows are being display on both sides (4 total). To fix, please add the custom CSS code below:

(css/custom.css):

#videos.owl-carousel .owl-nav .owl-next span,
#videos.owl-carousel .owl-nav .owl-prev span {
    display: none;
}

Add the nav option at “js/examples/examples.carousels.js”:

/*
Videos
*/
$('#videos').owlCarousel({
	items:1,
	nav: true,
	merge:true,
	loop:true,
	margin:10,
	video:true,
	lazyLoad:true,
	center:true,
	responsive:{
		480:{
			items:2
		},
		600:{
			items:4
		}
	},
	rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false
});

We hope this helps!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts