Owl-carousel with video

[Cosmin17]

Hello, I would like to find out if it’s possible to implement a video clip in the owl-carousel instead of an image. More precisely, I would like to use a full-screen video slider just like the one on the “index-classic-video.html” page, followed by a full-screen slider like the one on the “feature-headers-full-width-transparent-dark.html” page after the video clip ends. Thank you in advance!

---

[Support]

Hello, thanks for your purchase.

We don’t have an example of that but you can start adding the video in the first slide, like this:

<div class="owl-carousel-wrapper" style="height: 100vh;">
	<div class="owl-carousel dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1}}, 'loop': false, 'autoHeight': false, 'margin': 0, 'dots': true, 'dotsVerticalOffset': '-75px', 'nav': true, 'animateIn': 'fadeIn', 'animateOut': 'fadeOut', 'mouseDrag': false, 'touchDrag': false, 'pullDrag': false, 'autoplay': true, 'autoplayTimeout': 9000, 'autoplayHoverPause': true, 'rewind': true}">

		<!-- Carousel Slide 1 -->
		<div class="position-relative" style="background-color: #35383d; height: 100vh;">
			<section class="section border-0 video overlay overlay-show overlay-op-8 m-0" data-video-path="video/memory-of-a-woman" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;">
				<div class="container position-relative z-index-3 h-100">
					<div class="row align-items-center h-100">
						<div class="col">
							<div class="d-flex flex-column align-items-center justify-content-center h-100">
								<h1 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
									<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
										<img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
									</span>
									GET READY TO <span class="position-relative">SEE<span class="position-absolute left-50pct transform3dx-n50 top-0 mt-3"><img src="img/slides/slide-blue-line.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span>
									<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
										<img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
									</span>
								</h1>
								<h1 class="text-color-light font-weight-extra-bold text-12 line-height-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">PERFECT VIDEOS</h1>
								<p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">Check out our options and features</p>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>

		<!-- Carousel Slide 2 -->
		<div class="position-relative overlay overlay-show overlay-op-8 pt-5" style="background-image: url(img/slides/slide-bg-2.jpg); background-size: cover; background-position: center; height: 100vh;">
			<div class="container position-relative z-index-3 h-100">
				<div class="row justify-content-center align-items-center h-100">
					<div class="col-lg-6">
						<div class="d-flex flex-column align-items-center">
							<h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
								<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
									<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
								</span>
								WE WORK HARD AND PORTO HAS
								<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
									<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
								</span>
							</h3>
							<h2 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">THE BEST DESIGN</h2>
							<p class="text-4 text-color-light font-weight-light opacity-7 text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 25}">Trusted by over <strong class="text-color-light">40,000</strong> satisfied users, Porto is a huge success in the one of larest world's MarketPlace</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Carousel Slide 3 -->
		<div class="position-relative overlay overlay-show overlay-op-8 pt-5" style="background-image: url(img/slides/slide-bg-6.jpg); background-size: cover; background-position: center; height: 100vh;">
			<div class="container position-relative z-index-3 h-100">
				<div class="row justify-content-center align-items-center h-100">
					<div class="col-lg-6">
						<div class="d-flex flex-column align-items-center">
							<h3 class="position-relative text-color-light text-4 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
								<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
									<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
								</span>
								WE CREATE DESIGNS, WE ARE
								<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
									<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
								</span>
							</h3>
							<h2 class="porto-big-title text-color-light font-weight-extra-bold mb-3" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 250, 'animationName': 'fadeInRightShorterOpacity', 'letterClass': 'd-inline-block'}">PORTO</h2>
							<p class="text-4 text-color-light font-weight-light text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">The best choice for your new website</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Carousel Slide 4 -->
		<div class="position-relative video overlay overlay-show overlay-op-8 pt-5" data-video-path="video/memory-of-a-woman" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;">
			<div class="container position-relative z-index-3 h-100">
				<div class="row justify-content-center align-items-center h-100">
					<div class="col-lg-6">
						<div class="d-flex flex-column align-items-center">
							<h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
								<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
									<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
								</span>
								WE WORK HARD AND PORTO HAS
								<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
									<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
								</span>
							</h3>
							<h2 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">THE BEST DESIGN</h2>
							<p class="text-4 text-color-light font-weight-light opacity-7 text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 25}">Trusted by over <strong class="text-color-light">40,000</strong> satisfied users, Porto is a huge success in the one of largest world's MarketPlace<strong class="bg-light">Oi oi oi</strong></p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>

---

[Author]

Posts