Canvas Support

how to remove play button overlay on mobile devices

10 replies · opened Sep 20, 2016

Ssicnarf033Sep 20, 2016

Hello,

I have the video slider feature on a website and when viewed on mobile devices, it loads the image and a play button. How do you disable this play button and only show image. I don't want there to be an ability to play the video.

Also, I have a text image and font that loads when you first go into the website. It loads then reloads again with animation. I have everything set up similar to the index-corporate.html site but for some reason. This issue is produced on the desktop while the other is only on mobile.

Here is the website corp.nimblefish.com

Ssicnarf033Sep 20, 2016

To further explain, in the first video slider, the play button appears then disappears but in the other video slider, the play button stays.

SSemicolon WebSTAFFSep 20, 2016

Hello,

We Really Apologize about the Conveniences caused. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for 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.

Ssicnarf033Sep 20, 2016

the link is in the first post.

corp.nimblefish.com

SSemicolon WebSTAFFSep 22, 2016

Hello,

We Really Apologize about the Inconveniences and Delay. Please find the following code in the js/functions.js File inside the html5Video: function() Function Block: 

if( SEMICOLON.isMobile.any() && !element.hasClass('no-placeholder') ) {
	var placeholderImg = elementVideo.attr('poster');

	if( placeholderImg != '' ) {
		element.append('')
	}
}

and replace it with: 

if( SEMICOLON.isMobile.any() && !element.hasClass('no-placeholder') ) {
	var placeholderImg = elementVideo.attr('poster');

	if( placeholderImg != '' ) {
		element.append('')
	}

	elementVideo.hide();
}

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Ssicnarf033Sep 23, 2016

This disappears but it still loads the play button at the beginning. Also notice img (nimblefish) and text gets load and then time lapse video plays. i am not sure how and when this happened but its not the same as the canvas preview anymore.

SSemicolon WebSTAFFSep 24, 2016

Hello,

Please consider adding the following CSS Code: 

.device-touch .video-wrap video { display: none; }

This should fix the issue with the Video's Play Button displaying. However, regarding your Second Issue, we really apologize but are really not sure about this as this appears to be working normally for us. 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.

Ssicnarf033Sep 30, 2016

thank you. this worked like a charm!

Ssicnarf033Sep 30, 2016

actually i take that back. it looks like it removes the poster image entirely and now theres a white background. :(

SSemicolon WebSTAFFSep 30, 2016

Hello,

Thank You so much for your Patience and this Amazing Solution! We are not Really Sure about why Our Codes did not work as we provide it to you after checking it out on Our Demos. We Really Apologize about this Inconvenience!

Thank You so much for the Solution for this as it will surely help out other Users who are having this specific issue. Thanks for your Patience.

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

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