D
Daniel KimJan 25, 2026
I just purchased another 6-month support service.
I know I am using an old version of Canvas template, but I hope you have a solution for this issue.
Recently built a site, www.seattlemaxicourse.com, and there's a video slider on the main page. The video slider works okay on desktop, but it doesn't play the video on mobile. Only shows the poster image, How do I fix this issue so that the video plays on both desktop and mobile? Below is the code for the slider. Thank you so much!
<section id="slider" class="slider-element slider-parallax swiper_wrapper include-header" data-effect="fade" data-loop="false" data-speed="1000" data-progress="false" data-disable-under="0" style="background-image:url(images/videos/hero-seattle-maxicourse-opening.jpg); background-size:cover;">
<div class="slider-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark">
<div class="container">
<div class="slider-caption slider-caption-center">
<div style="margin-top:40px;">
<span class="regular-menu">
</span>
<h1 class="tiempos fluid-font lh-12 white-link mb-0 mt-0"><div data-animate="fadeInUp">The Premier Dental Implant Training Program in the Pacific Northwest</div></h1>
</div>
<p class="d-sm-block" data-delay="200" style="margin-top:10px;"><div data-animate="fadeInUp">
<span class="avant-garde">Comprehensive 300-Hour AAID Curriculum. Master the Art and Science of Implant Dentistry.</span>
<div style="vertical-align:top;" class="mt-5"><a href="register.html" class="button-fill button button-border button-light button-circle button-large text-right m-0"><span>Get Started</span></a></div></div></p>
</div>
</div>
<div class="video-wrap">
<video id="slide-video" poster="images/videos/hero-seattle-maxicourse-opening.jpg" preload="auto" loop autoplay playsinline muted>
<source src="images/videos/hero-seattle-maxicourse-opening.webm" type="video/webm"/>
<source src="images/videos/hero-seattle-maxicourse-opening.mp4" type="video/mp4"/>
</video>
</div></div>
</div>
</div>
</div>
</section>