Canvas Support

VIDEO POSTER IMAGE MOBILE PROBLEM

7 replies · opened Mar 14, 2017

MMike06400Mar 14, 2017

Hello, thanks again for all your updates, the template is by far the best.

I mhave just a problem, but which is causing us a lot of trouble, maybe can you help please ?

We get a 80% rebund rate on analytics, and we found out why.

Most of our customers visit through mobiles, and 60% of them use android.

On android, we see that index.html loads in 75 seconds ! After weeks of search, we found out why.

We use a video on computers and tablets format, that has a poster option that displays a picture instead when you access through a mobile.

The problem is that when its on mobile, it LOADS the video in background of the picture that actually appears OVER the video (so the video is hidden but still loads), andacually it starts loading again and again the same video evey 30seconds indefinitly.

Please can you tell me how to change the code so the video doesnt NOT load at all on mobiles,which will fix our time loading issue.

Thanks and best regards !

MMike06400Mar 20, 2017

Any solution please ?

MMike06400Mar 28, 2017

:(

SSemicolon WebSTAFFMar 31, 2017

Hello,

We Apologize about the Delays in replying to your Support Query!

Regarding your Issue, the Videos are auto-managed on Mobile Devices and cannot be disabled on a Specific Device. Moreover, Videos are not necessarily downloaded on a Physical Mobile Device. A Good Alternative would be to hide the Videos on Mobile Devices by adding the .hidden-xs Class to the <video> Tag. And then add a Background Image to the Slide which holds the HTML5 Video.

This should definitely fix the issue. Hope this Helps!

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

MMike06400Apr 13, 2017

Thanks for the answer, its easy for me to put the .hidden-xs

but i am not able to put a background image

could you please tell me what i must put to keep EXACTLY the same behaviour of the .GIF that appears currently on the page as a poster independantly of the screen size it must stay centered and fully appear

thanks !!!!!

here's my code :

						&lt;div class="video-wrap hidden-xs"&gt;
							&lt;video id="slide-video" poster="images/videos/boite-de-vitesses.gif" preload="auto" loop muted&gt;
								&lt;source src="images/videos/explore.webm" type="video/webm" /&gt;
								&lt;source src="images/videos/explore.mp4" type="video/mp4" /&gt;
							&lt;/video&gt;
							&lt;div class="video-overlay" style="background-color: rgba(0,0,0,0);"&gt;&lt;/div&gt;
						&lt;/div&gt;
SSemicolon WebSTAFFApr 15, 2017

Hello,

Please consider using the following code:

This should definitely work fine. Hope this Helps!

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

MMike06400Apr 28, 2017

Hello, I did it and thank you so much, I did EVERY SINGLE ONE tip you gave for speed optimisation, and the index page still takes more than 9 seconds to load on a mobile, I am totally depressed, can you please save my job here ? thanks in advance.......

www.eden-boites.com

Best regards
Mike

SSemicolon WebSTAFFMay 1, 2017

Hello,

We Definitely Understand your Concerns and have checked out your Website, but unfortunately the Canvas Template Files plays no part in your Website's Speed being slow. Please make sure that you have tested your Website on Google Page Speed: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.eden-boites.com%2F&tab=desktop and Pingdom Tools: https://tools.pingdom.com/#!/d28Ypi/http://www.eden-boites.com/ to identify the possible issues!

Meanwhile, if you face any issues with the Template Codes, we are always here to help you out!

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