Responsive Slider does not work in the mobile

IimpalaclickSep 6, 2017

Hi,
I am using the index-corperate.html Rev Slider, It works fine in the desktop. But when i try to load in the mobile it loads with a blank screen without running the video. Also, the text on top of the slider does not appear responsively. Other parts appears responsively.

You can check the live beta version using this link. http://www.beta.thusithaethugala.com/

Please find the index code below. Thanks

							&lt;!-- LAYER NR. 1 --&gt;
							&lt;div class="tp-fade fadeout fullscreenvideo rs-background-video-layer"
								data-forcerewind="on"
								data-volume="mute"
								data-videowidth="100%"
								data-videoheight="100%"
								data-videomp4="images/videos/explore.mp4"
								data-videopreload="preload"
								data-videoloop="loopandnoslidestop"
								data-forceCover="1"
								data-aspectratio="37:20"
								data-autoplay="true"
								data-autoplayonlyfirsttime="false"
								data-nextslideatend="false"
								&gt;
							&lt;/div&gt;

							

							&lt;div class="tp-caption ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
							data-x="50"
							data-y="260"
							data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
							data-speed="800"
							data-start="1200"
							data-easing="easeOutQuad"
							data-splitin="none"
							data-splitout="none"
							data-elementdelay="0.01"
							data-endelementdelay="0.1"
							data-endspeed="1000"
							data-textAlign="center"
							data-endeasing="Power4.easeIn" style="z-index: 3; white-space: nowrap; -webkit-text-stroke: 2px black;"&gt;Welcome to Hello World&lt;/div&gt;

							&lt;div class="tp-caption ltl tp-resizeme revo-slider-desc-text"
							data-x="195"
							data-y="370"
							data-transform_in="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;e:Power4.easeOutQuad;"
							data-speed="800"
							data-start="1400"
							data-easing="easeOutQuad"
							data-splitin="none"
							data-splitout="none"
							data-elementdelay="0.01"
							data-endelementdelay="0.1"
							data-endspeed="1000"
							data-textAlign="center"
							data-endeasing="Power4.easeIn" style="z-index: 3; width: 750px; max-width: 750px; white-space: normal;"&gt;
							&lt;/div&gt;

							
						
					
				&lt;/div&gt;
			&lt;/div&gt;&lt;!-- END REVOLUTION SLIDER --&gt;
		&lt;/div&gt;
	&lt;/section&gt;

SSemicolon WebSTAFFSep 7, 2017

Hello,

Please use these updated Files: https://www.dropbox.com/s/c7jkbljlyuvyjy2/slider-revolution-responsive-fixed.zip?dl=1 to fix the issue with responsiveness.

Additionally, for the HTML5 Video Issue, 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 Android and Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

We are definitely keeping an eye on the Latest Updates by Apple and Android to allow the auto-playing of HTML5 Videos on their respective phones and as soon as they release an Update we will surely make this available. The HTML5 Video on Mobile Devices do not work on any Website.

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

IimpalaclickSep 14, 2017

Thank you very much. It worked for me.

Kind Regards
Pubuduni