Canvas Support

Full screen video

3 replies · opened Sep 7, 2022

MmschejbalSep 7, 2022

Hello Again,

On the same page, when using full screen video, the video is not playing on iOS mobile device (on iPad though it does play). Can this be modified?

Thanks,
Maciek

SSemicolon WebSTAFFSep 8, 2022

Hello,

Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User’s Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

You can use the following instructions to make it work on iOS 10 or above devices:

  1. 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]

  2. 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.

MmschejbalSep 8, 2022

Would you be so kind and apply your suggestion to the section on my page, I'm unsuccessful doing this, many thanks!

			&lt;div class="video-wrap" style="z-index: 1;"&gt;
				&lt;video poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted&gt;
					&lt;source src='images/videos/explore.mp4' type='video/mp4' /&gt;
					&lt;source src='images/videos/explore.webm' type='video/webm' /&gt;
				&lt;/video&gt;
				&lt;div class="video-overlay" style="background-color: rgba(0,0,0,0.45);"&gt;&lt;/div&gt;
			&lt;/div&gt;
SSemicolon WebSTAFFSep 8, 2022

Hello,

Sure. Please consider using this code:
[ch_pre]





[/ch_pre]

This will definitely work fine. 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