2 replies · opened Oct 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:
<!--video -->
<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>
Hello,
Add the playsinline Attribute to the <video> Tag. Example:
[ch_pre]<video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted playsinline>
...
</video>[/ch_pre]
Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example:
[ch_pre]<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>[/ch_pre]
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.
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