Issues with Videos Not Playing on Mobile Browsers

1 reply·opened Aug 19, 2024
S
SoBuenoAug 19, 2024

Hello,

I am currently creating new landing pages for my website that include background videos. While these videos autoplay on desktop browsers, they are not playing on any mobile browsers. Instead, a static JPG image is displayed. Even when I request the desktop version on mobile browsers, the videos still do not play.

Could you please assist me in resolving this issue so that the videos autoplay on mobile devices?

Thank you for your help.

S
SemiColonWebSTAFFAug 21, 2024

Hello,

Simply use the <video> Tag Codes from the Latest Version of Canvas:

<div class="video-wrap no-placeholder">
	<video id="slide-video" poster="images/videos/deskwork.jpg" preload="auto" loop autoplay muted playsinline>
		<source src='images/videos/deskwork.webm' type='video/webm'>
		<source src='images/videos/deskwork.mp4' type='video/mp4'>
	</video>
	<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>

This will enable the Video on Mobile Devices. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard