replacing slider images with video

Jonathan Duane
Jonathan Duane used Ask the Experts™
on
Hi guys,

I want to add a video instead of the 3 images here on the slider http://88.202.183.16/~lcseating/ to a video thats attached but keep the overlay that is going over the image at the moment to overlay the video, is that possible?
Video.mp4
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
yes, just replace the images with the video.

It should be part of your plug in https://wpdaddy.com/how-to-add-video-in-the-slider-revolution-a-simple-guide/

Are you using rev slider?

Author

Commented:
i will double check now, thanks Scott my fear is that those images are hardcoded in

Author

Commented:
no, unfortunately its not using revslider, it would be great if it did :(

here is the code here

<?php
/**
 * Template Name: Homepage
 */
get_header();
?>
<style>
.footer-area{
	margin-top:0 !important;	
}
	.side-re{
	    position: absolute;
    top: 112px;
    right: -2px;
    width: 55px;
    z-index: 9999999999999;
}
	.carousel-control{
		background-image:initial !important;
		width:4% !important;
	}
	@media (min-width:600px){
		.carousel-control.right{
			right:98px !important;
		}
		.carousel-control.left{
			left:98px !important;
		}
	}
	@media (max-width:599px){
		.carousel-control.right{
			right:15px !important;
		}
		.carousel-control.left{
			left:15px !important;
		}
	}
</style>
<!-- slider here -->
<div class="slider-lc-2">
<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="<?php echo site_url(); ?>/wp-content/uploads/2020/01/slide30.jpg" alt="Los Angeles">
		<a href="<?php echo site_url(); ?>/contact/"><img src="<?php echo site_url(); ?>/wp-content/uploads/2019/11/request.png" class="img-responsive side-re" /></a>
    </div>
	  
	
<div class="item">
      <img src="<?php echo site_url(); ?>/wp-content/uploads/2019/11/slide2.jpg" alt="Los Angeles">
		<a href="<?php echo site_url(); ?>/contact/"><img src="<?php echo site_url(); ?>/wp-content/uploads/2019/11/request.png" class="img-responsive side-re" /></a>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

<div class="container featured-pr">
	<div class="row">
		<div class="col-md-12">
			<p class="uy1">Featured Products</p>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-4">
			<div class="fr-container">
				<div class="fr-image" style="background:url(<?php echo site_url(); ?>/wp-content/uploads/2019/02/LC_Seating_Product_26.jpg) no-repeat;background-size: contain;"></div>
				<div class="fr-content">
					<p class="fr-title">Foam Carved Systems CFS</p>
					<p class="fr-link"><a href="<?php echo site_url(); ?>/product/foam-carved-systems-cfs/">Read more</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="fr-container">
				<div class="fr-image" style="background:url(<?php echo site_url(); ?>/wp-content/uploads/2019/02/LC_Seating_Product_16.jpg) no-repeat;background-size: contain;"></div>
				<div class="fr-content">
					<p class="fr-title">Moulded Seat Inserts (MSI)</p>
					<p class="fr-link"><a href="<?php echo site_url(); ?>/product/moulded-seat-inserts-msi/">Read more</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="fr-container">
				<div class="fr-image" style="background:url(<?php echo site_url(); ?>/wp-content/uploads/2018/09/Rogue_feature_image1_rp-tuning.jpg) no-repeat;background-size: contain;"></div>
				<div class="fr-content">
					<p class="fr-title">Ki Mobility – Rogue</p>
					<p class="fr-link"><a href="<?php echo site_url(); ?>/product/rogue-ki-mobility/">Read more</a></p>
				</div>
			</div>
		</div>
		
		<div class="col-md-4">
			<div class="fr-container">
				<div class="fr-image" style="background:url(<?php echo site_url(); ?>/wp-content/uploads/2018/09/Flip_feature_image2_wheel-lock.jpg) no-repeat;background-size: contain;"></div>
				<div class="fr-content">
					<p class="fr-title">Ki Mobility – Little Wave Flip</p>
					<p class="fr-link"><a href="<?php echo site_url(); ?>/product/little-wave-flip-ki-mobility/">Read more</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="fr-container">
				<div class="fr-image" style="background:url(<?php echo site_url(); ?>/wp-content/uploads/2018/09/Rogue-XP-Brochure-Inside-Spread-Left-RGB-1.jpg) no-repeat;background-size: contain;"></div>
				<div class="fr-content">
					<p class="fr-title">Rogue XP – KI Mobility</p>
					<p class="fr-link"><a href="<?php echo site_url(); ?>/product/rogue-xp-ki-mobility/">Read more</a></p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="fr-container-full">
				<p class="fr-full-title"><a href="<?php echo site_url(); ?>/contact/">Get in Touch</a></p>
			</div>
		</div>
	</div>
</div>
<!-- mob-slider -->
<div class="slider-lc-m only-m" style="">
	<img src="<?php echo site_url(); ?>/site-data/mob-image.jpg" class="img-responsive" style="" />
	<div class="slider-over">
		<p class="a4">Dedicated.<br>Your comfort is our top<br>priority.</p>
		<p class="a5"><a href="<?php echo site_url(); ?>/product-category/manual-wheelchairs/"><i class="fa fa-long-arrow-right arrow-on-black" aria-hidden="true"></i> Discover more</a></p>
	</div>
</div>
<div class="container" style="position: relative;">
	<div class="slider-over only-d">
		<p class="a4">Dedicated.<br>Your comfort is our top<br>priority.</p>
		<p class="a5"><a href="<?php echo site_url(); ?>/product-category/manual-wheelchairs/"><i class="fa fa-long-arrow-right arrow-on-black" aria-hidden="true"></i> Discover more</a></p>
	</div>
	
	<div class="row" style="">
		<div class="section-1" style="background:url(<?php echo site_url(); ?>/site-data/picnew.jpg) no-repeat;">
			<div class="section-1-over">
				<p class="a2">Arrange your demo today</p>
				<p class="a3">Choose a product on our website that you would like to trial, and we will bring your chosen product to your home with a member of our qualified clinical sales team. You can try the product at your leisure with no obligation to buy. Our friendly and knowledgeable staff will assess your needs, guide you through our seating solutions and answer any questions you may have. </p>
				<p class="a6"><a href="<?php echo site_url(); ?>/contact/"><i class="fa fa-long-arrow-right arrow-on-white" aria-hidden="true"></i> View Our Process</a></p>
			</div>
		</div>
	</div>
	
	<div class="row section-2 only-d" style="">
		<div class="col-md-8">
			<div class="section-2-image" style="background:url(<?php echo site_url(); ?>/site-data/section2-image.jpg) no-repeat;">
				<p class="a9">Aftercare &amp;<br>Support</p>
			</div>
		</div>
		<div class="col-md-4">
			<div class="section-2-inner">
				<p class="a7">We strive to deliver excellent service<br> through an in-depth program of support.<br> Once you receive your product, we will <br>check-in with you regularly to make sure <br>that everything is working perfectly and<br> we will be available to answer any queries<br> that may have arisen in your first few <br>weeks of ownership.</p>
				<p class="a8"><a href="<?php echo site_url(); ?>/contact/"><i class="fa fa-long-arrow-right arrow-on-white" aria-hidden="true"></i> View Our Process</a></p>
			</div>
		</div>
	</div>
</div>

<div class="section-3 only-d" style="background:url(<?php echo site_url(); ?>/site-data/image3.jpg) no-repeat;">
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<img src="<?=site_url(); ?>/site-data/lcs-white.png" class="img-responsive lcs-white" />
			</div>
			<div class="col-md-9">
				<p class="a10">LC Seating are one of Ireland’s leading suppliers of rehabilitation and seating products.<br>We operate throughout Ireland, primarily dealing with occupational therapy / seating clinics in providing engineered solutions for a variety of complex seating needs.</p>
				<p class="b1"><a href="<?php echo site_url(); ?>/contact/"><i class="fa fa-long-arrow-right arrow-on-white" aria-hidden="true"></i> View Our Process</a></p>
			</div>
		</div>
	</div>
</div>
<div class="section-4 only-d">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<img src="<?=site_url(); ?>/site-data/p1image.jpg" class="img-responsive p1image" />
			</div>
			<div class="col-md-4">
				<img src="<?=site_url(); ?>/site-data/p2image.png" class="img-responsive p2image" />
			</div>
		</div>
	</div>
</div>
<div class="section-5 container only-d">
	<div class="row">
		<div class="col-md-8">
			<img src="<?=site_url(); ?>/site-data/p3image.jpg" class="img-responsive p1image" />
		</div>
		<div class="col-md-4">
			<p class="b2">The LC Seating<br>Difference</p>
			<p class="b3">We have brought<br><span>customised comfort</span> to<br>thousands of customers<br>since 2008 —</p>
			<p class="b4"><a href="<?php echo site_url(); ?>/about/">About Us <i class="fa fa-long-arrow-right arrow-on-white" aria-hidden="true"></i></a></p>
		</div>
	</div>
</div>
<div class="section-6a container">
	<div class="row">
		<div class="col-md-12">
			<p class="ee1">Explore our range of products</p>
		</div>
	</div>
</div>
<div class="section-6">
	<div class="container">
		<div class="row">
			<div class="col-md-4 padd-in-pros">
				<div class="pro-img" style="background: url(<?=site_url(); ?>/wp-content/uploads/2019/10/c1.png) no-repeat;"></div>
				<p class="e1"><i class="fa fa-long-arrow-right arrow-on-white" aria-hidden="true"></i> Custom Seating</p>
				<p class="e2"><a href="<?=site_url(); ?>/product-category/custom-seating/">More</a></p>
			</div>
			<div class="col-md-4 padd-in-pros darkcolor" style="">
				<div class="pro-img" style="background: url(<?=site_url(); ?>/wp-content/uploads/2019/10/c2.png) no-repeat;"></div>
				<p class="e1"><i class="fa fa-long-arrow-right arrow-on-white" aria-hidden="true"></i> Manual Wheelchairs</p>
				<p class="e2"><a href="<?=site_url(); ?>/product-category/manual-wheelchairs/">More</a></p>
			</div>
			<div class="col-md-4 padd-in-pros" style="background:#B9C0C9;">
				<div class="pro-img" style="background: url(<?=site_url(); ?>/wp-content/uploads/2019/10/c3.png) no-repeat;"></div>
				<p class="e1"><i class="fa fa-long-arrow-right arrow-on-white" aria-hidden="true"></i> Power Wheelchairs</p>
				<p class="e2"><a href="<?=site_url(); ?>/product-category/power-chairs/">More</a></p>
			</div>
		</div>
	</div>
</div>
<?php get_footer(); ?>

Open in new window

CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
But your WP code showing you have that plug in available. Perhaps you are using the WP Bakery then https://ultimate.brainstormforce.com/backgrounds/ and you also have owl installed too https://owlcarousel2.github.io/OwlCarousel2/demos/video.html

Where you can, I would opt to use the plug ins instead of custom code.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
If you do want to continue with the custom route and make your own page, you simply embed video https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
<video controls width="250">

    <source src="/media/examples/flower.webm"
            type="video/webm">

    <source src="/media/examples/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

Open in new window

and make it 100% width.   Since you have several plug ins, I still would try and use those first.

Author

Commented:
Hi Scott,

where would i place this code? and would i have to replace the slider code? and last question would the overlay stay?
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
Which option?  if it is using one of the plug ins, you run everything through the plug in.  If you are trying to figure out where in your code things are placed, while the page is loaded, put your mouse over the slider, right click and select, "Inspect". This will bring up the browser's dev tools and show you right where the image lives. In this case, inside the div class carousel-liner which is inside the id myCarousel.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial