Video html 5 mobile

2 replies·opened Oct 21, 2021

Francisco CignaOct 21, 2021

Dear sr, this code works great in pc and mac but in mobile show the poster picture, is any way to make it work on mobile, thanks a lot.

code:

<div class="video-wrap">
<video id="slide-video" poster="images/video/poster.jpg" preload="auto" loop autoplay muted>
<source src='images/video/myvideo.webm' type='video/webm' />
<source src='images/video/myvideo.mp4' type='video/mp4' />
</video>
</div>

SemiColonWebSTAFFOct 22, 2021

Hello,

Add the playsinline Attribute to the <video> Tag. Example:

<video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted playsinline>
    ...
</video>

Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example:

<div class="video-wrap no-placeholder">
    <video poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted playsinline>
        ...
    </video>
    <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
</div>

This should definitely work fine. Hope this Helps!

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

Francisco CignaOct 26, 2021

solved thanks a lot.

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