Using a video in the carousel

[USS_Sandhu]

Hi all, I’d like to use the carousel in corporate-16 template, but I can’t seem to get the text to show up in the overlay. Adding a simple div for the video does have the video show and the box pops up as well, but no text… what am I missing?

Thanks much,
Sam

<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover show-dots-xs nav-bottom nav-inside nav-style-2 nav-light nav-font-size-sm show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 7000}" data-dynamic-height="['800px','800px','800px','550px','500px']" style="height: 800px;">
	<div class="owl-stage-outer">
		<div class="owl-stage">

			<!-- Carousel Slide 1 -->
			<div class="owl-item position-relative overlay overlay-show overlay-op-7" style="background-size: cover; background-position: center;">

				<div>
					<video preload="auto" loop autoplay muted class="w-100">
						<source src="video/slidercomp_01.mp4" type="video/mp4" />
					</video>									
				</div>

				<div class="container position-relative z-index-3 h-100">
					<div class="row align-items-center align-items-md-end justify-content-center justify-content-md-start h-100">
						<div class="col-sm-10 col-md-6 col-lg-5 offset-md-6 text-center text-md-start ps-md-5 pb-md-5 pt-5 pt-md-0 mt-5 mt-md-0">
							<h1 class="text-color-light font-weight-extra-bold text-9 text-lg-10 line-height-1 pe-lg-5 mb-3 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500" data-appear-animation-duration="500ms" data-plugin-options="{'minWindowWidth': 0}">Responsible recycling</h1>
							<p class="text-4 text-color-light font-weight-light opacity-7 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 600, 'minWindowWidth': 0, 'animationSpeed': 50}">Better for us, even better for our environment</p>
							<a href=""services.html"">VIEW OUR SERVICES</a>
						</div>
					</div>
				</div>

				<div class="position-absolute bottom-0 right-0 w-50pct z-index-2 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">
					<div class="d-none d-md-block bg-primary opacity-9" data-dynamic-height="['385px','385px','385px','385px','385px']" style="height: 385px;"></div>
				</div>
			</div>

---

[Support]

Hello, thanks for your purchase.

Looks like you just need to set that div to absolute and change position, for example:

<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover show-dots-xs nav-bottom nav-inside nav-style-2 nav-light nav-font-size-sm show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 7123000}" data-dynamic-height="['800px','800px','800px','550px','500px']" style="height: 800px;">
	<div class="owl-stage-outer">
		<div class="owl-stage">

			<!-- Carousel Slide 1 -->
			<div class="owl-item position-relative overlay overlay-show overlay-op-7" style="background-size: cover; background-position: center;">

				<div>
					<video preload="auto" loop autoplay muted class="w-100">
						<source src="video/slidercomp_01.mp4" type="video/mp4" />
					</video>									
				</div>

				<div class="container position-absolute top-0 right-0 z-index-3 h-100">
					<div class="row align-items-center align-items-md-end justify-content-center justify-content-md-start h-100">
						<div class="col-sm-10 col-md-6 col-lg-5 offset-md-6 text-center text-md-start ps-md-5 pb-md-5 pt-5 pt-md-0 mt-5 mt-md-0">
							<h1 class="text-color-light font-weight-extra-bold text-9 text-lg-10 line-height-1 pe-lg-5 mb-3 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500" data-appear-animation-duration="500ms" data-plugin-options="{'minWindowWidth': 0}">Responsible recycling</h1>
							<p class="text-4 text-color-light font-weight-light opacity-7 mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 600, 'minWindowWidth': 0, 'animationSpeed': 50}">Better for us, even better for our environment</p>
							<a href="services.html">VIEW OUR SERVICES</a>
						</div>
					</div>
				</div>

				<div class="position-absolute bottom-0 right-0 w-50pct z-index-2 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300" data-plugin-options="{'minWindowWidth': 0}">
					<div class="d-none d-md-block bg-primary opacity-9" data-dynamic-height="['385px','385px','385px','385px','385px']" style="height: 385px;"></div>
				</div>
			</div>

Please try that and let me know if you need further assistance.

Kind Regards,

Jonas

---

[Author]

Posts