Canvas Support

Video not working on mobile headers

17 replies · opened Feb 2, 2021

AAyoreFeb 2, 2021

Hello,

Thank you for your template, it is great.
I have just a little problem with the videos in headers on mobile support with index-blog.html (or even other pages using videos on the header). It stands still to the explore-poster.jpg
The video is not launched. I have tried several web navigators, same result.
Can you provide a correction?

Best regards,

SSemicolon WebSTAFFFeb 2, 2021

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 .

Meanwhile, currently, the Inline Video Autoplay is supported only from iOS 10 onwards. 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.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.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.

AAyoreFeb 3, 2021

Thank you ! It works perfectly !

Your answers are really of quality.

So I have 2 more questions :

  • The video work on mobile, but are not automatically resized. How could I put different videos (one in the desktop size and another one for mobile)

  • The slider is not moving automatically, the user have to press the "next" button to change the frame. Is it possible to make it automatic ?

Best regards

SSemicolon WebSTAFFFeb 4, 2021

Hello,

Very Happy to Help!

  1. To use different Videos on Mobile Devices, consider using the Bootstrap Display Utility Classes: https://getbootstrap.com/docs/4.5/utilities/display/ . Example:
    [ch_pre]

[/ch_pre]

  1. Simply add the data-autoplay="5000" Attribute to the .slider-element DIV. 5000 is 5 Seconds in milliseconds. So you can change this according to your needs.

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.

AAyoreFeb 4, 2021

Hello again

1st point = work perfectly

I have tried the same code for the images instead of videos, bur it is not working... can you give me the right code for that ?

2nd point, I found 18 different .slider-element, can you tell me witch one is the right one (or an example)

And after that I am done !
Thanks

SSemicolon WebSTAFFFeb 5, 2021

Hello,

  1. You can consider using these for Images:
    [ch_pre]
    [/ch_pre]

  2. There should only be one .slider-element on the Page which is the Parent Container for the Slider. If there are multiple, then there's something wrong. The Codes should look like this:
    [ch_pre][/ch_pre]

Hope this Helps!

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

AAyoreFeb 5, 2021

Great ! It works !

The only thing is that I have a white flash, when the image is changing.
I made you a video. Thanks

Here is my code :
<section id="slider" class="slider-element swiper_wrapper min-vh-75 " data-autoplay="5000">
<div class="slider-inner" >

			&lt;div class="swiper-container swiper-parent"&gt;
				&lt;div class="swiper-wrapper"&gt;
					&lt;div class="swiper-slide dark"&gt;
						&lt;div class="container"&gt;
						&lt;/div&gt;
						&lt;div class="swiper-slide-bg d-none d-md-block" style="background-image: url('images/header1.jpg');"&gt;&lt;/div&gt;
						&lt;div class="swiper-slide-bg d-block d-md-none" style="background-image: url('images/header1m.jpg');"&gt;&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class="swiper-slide dark"&gt;
						&lt;div class="container"&gt;
							&lt;div class="slider-caption slider-caption-center"&gt;
								&lt;h2 data-animate="fadeInUp"&gt;Partez à l'aventue&lt;/h2&gt;
								
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class="swiper-slide-bg d-none d-md-block" style="background-image: url('images/header3.jpg');"&gt;&lt;/div&gt;
						&lt;div class="swiper-slide-bg d-block d-md-none" style="background-image: url('images/header3m.jpg');"&gt;&lt;/div&gt;
					&lt;/div&gt;
					&lt;div class="swiper-slide dark"&gt;
						&lt;div class="container"&gt;
							&lt;div class="slider-caption slider-caption-center"&gt;
								&lt;h2 data-animate="fadeInUp"&gt;Menez l'enquête&lt;/h2&gt;
								
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class="swiper-slide-bg d-none d-md-block" style="background-image: url('images/header2.jpg');"&gt;&lt;/div&gt;
						&lt;div class="swiper-slide-bg d-block d-md-none" style="background-image: url('images/header2m.jpg');"&gt;&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="slider-arrow-left"&gt;&lt;i class="icon-angle-left"&gt;&lt;/i&gt;&lt;/div&gt;
				&lt;div class="slider-arrow-right"&gt;&lt;i class="icon-angle-right"&gt;&lt;/i&gt;&lt;/div&gt;
				&lt;div class="slide-number"&gt;&lt;div class="slide-number-current"&gt;&lt;/div&gt;&lt;span&gt;/&lt;/span&gt;&lt;div class="slide-number-total"&gt;&lt;/div&gt;&lt;/div&gt;
			&lt;/div&gt;

		&lt;/div&gt;
	&lt;/section&gt;
SSemicolon WebSTAFFFeb 6, 2021

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

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

SSemicolon WebSTAFFFeb 6, 2021

Hello,

Thanks for the URL. We have tried checking this out and are not sure what is causing this. This appears to be occurring only on Safari for us (not on Chrome or Firefox). We did found some HTML Validation errors on your Page: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.axxes-bmap.com%2Fessais%2Findex.html, so you should consider fixing this first and then try checking again.

Additionally, make sure that your images are optimized and not too large as this might cause glitches when using Animations.

Hope this Helps!

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

AAyoreFeb 7, 2021

Thank you.

Ok and what is the optimal image size for your responsive template ?

SSemicolon WebSTAFFFeb 8, 2021

Hello,

If you are using Images for Parallax or Full Screen Sliders, Images with widths of 1920px is recommended. If using Images inside a Container, you can use Images with widths of 1440px.

Hope this Helps!

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

AAyoreFeb 11, 2021

Hello, one more question,

How can I change de flavicon ?

SSemicolon WebSTAFFFeb 12, 2021

Hello,

You can simply use the following code in the `` tag:
[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.

AAyoreMar 8, 2021

Hello again,

Do you have a page in the template which deals with GDRP compliance?

Best regards,

AAyoreMar 11, 2021

Thank you.

Apparently it doesn't work on Mac safari.

SSemicolon WebSTAFFMar 12, 2021

Hello,

We have just checked this out on Mac Safari and it appears to be working fine for us (see attached).

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