Canvas Support

Revulation Slider Problem

6 replies·opened Nov 22, 2017
O
onareNov 22, 2017

Hi , i have a problem with revulation slider.

1)Slider Revulation Not Work On Mobile Telephone

2)I Want Use Youtube Video URL On my slider.How Can I.My Codes Belows.

	<section id="slider" class="slider-parallax revslider-wrap clearfix">
			<div class="slider-parallax-inner">
	 
				<div class="tp-banner-container rev_slider_wrapper fullscreen-container">
					<div class="tp-banner" >
						<ul>    
                           
                            <!-- SLIDE  -->
							
							
							
						 
							<li class="dark"  data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="https://www.onare.com/vid/Ergopack-air-1.png"  data-saveperformance="off"  data-title="">
								<!-- MAIN IMAGE -->
								<img src="https://www.onare.com/vid/Ergopack-air-1.png"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
								<!-- LAYERS -->

								<!-- LAYER NR. 1 -->
								<div class="tp-fade fadeout fullscreenvideo rs-background-video-layer"
									data-forcerewind="on"
									data-volume="mute"
									data-videowidth="100%"
									data-videoheight="100%"
									data-videomp4="https://www.onare.com/vid/Ergopack-air-1.mp4"
									data-videopreload="preload"
									data-videoloop="none"
									data-forceCover="1"
									data-aspectratio="16:9"
									data-autoplay="true"
									data-autoplayonlyfirsttime="false"
									data-nextslideatend="true"
									>
								</div>

								<!-- LAYER NR. 2 -->

                                	<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
								data-x="116"
								data-y="260"
								data-customin="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="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeOut" style="z-index: 3; white-space: nowrap;">Ergonomik ! Kolay ! Verimli !</div>

								<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
								data-x="116"
								data-y="335"
								data-customin="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="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 3; white-space: nowrap;">ErgoPack Air

									

																	  

								</div>

							
					 
  							<a href="#" data-scrollto="#content" data-offset="100" class="dark one-page-arrow"><i class="icon-angle-down infinite animated fadeInDown"></i></a>

							</li>

							<li class="dark" data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="https://www.onare.com/vid/itipack-vid.png"  data-saveperformance="off"  data-title="">
								<!-- MAIN IMAGE -->
								<img src="https://www.onare.com/vid/itipack-vid.png"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
								<!-- LAYERS -->

								<!-- LAYER NR. 1 -->
								<div class="tp-fade fadeout fullscreenvideo rs-background-video-layer"
									data-forcerewind="on"
									data-volume="mute"
									data-videowidth="100%"
									data-videoheight="100%"
									data-videomp4="vid/İtipack-web.mp4"
									data-videopreload="preload"
									data-videoloop="none"
									data-forceCover="1"
									data-aspectratio="16:9"
									data-autoplay="true"
									data-autoplayonlyfirsttime="false"
									data-nextslideatend="true"
									>
								</div>

								<!-- LAYER NR. 2 -->
								
                            
								<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
								data-x="116"
								data-y="260"
								data-customin="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="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeOut" style="z-index: 3; white-space: nowrap;">Full Otomatik  Çemberleme Makinaları </div>

				            	 <div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
								data-x="116"
								data-y="335"
								data-customin="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="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 3; white-space: nowrap;">ITIPACK </div>

							<a href="#" data-scrollto="#content" data-offset="100" class="dark one-page-arrow"><i class="icon-angle-down infinite animated fadeInDown"></i></a>

							</li>
							 

							
							
							<li class="dark" data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="https://www.onare.com/vid/GT-ONE_SC.png"  data-saveperformance="off"  data-title="">
								<!-- MAIN IMAGE -->
								<img src="https://www.onare.com/vid/GT-ONE_SC.png"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
								<!-- LAYERS -->

				 
								<div class="tp-fade fadeout fullscreenvideo rs-background-video-layer"
									data-forcerewind="on"
									data-volume="mute"
									data-videowidth="100%"
									data-videoheight="100%"
									data-videomp4="vid/gt-smart.mp4"
									data-videopreload="preload"
									data-videoloop="none"
									data-forceCover="1"
									data-aspectratio="16:9"
									data-autoplay="true"
									data-autoplayonlyfirsttime="false"
									data-nextslideatend="true"
									>
								</div>

				 
                            
								<div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
								data-x="116"
								data-y="260"
								data-customin="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="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeOut" style="z-index: 3; white-space: nowrap;">Akülü   Çemberleme Makinaları</div>

				            	 <div class="tp-caption customin ltl tp-resizeme revo-slider-emphasis-text nopadding noborder"
								data-x="116"
								data-y="335"
								data-customin="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="1000"
								data-easing="easeOutQuad"
								data-splitin="none"
								data-splitout="none"
								data-elementdelay="0.01"
								data-endelementdelay="0.1"
								data-endspeed="1000"
								data-endeasing="Power4.easeIn" style="z-index: 3; white-space: nowrap;">GT SMART </div>

							<a href="#" data-scrollto="#content" data-offset="100" class="dark one-page-arrow"><i class="icon-angle-down infinite animated fadeInDown"></i></a>

							</li>

					
							
							
							
							
							 
						</ul>

					</div>
				</div>
			</div>
		</section>

My live URL : https:www.onare.com

How Can Resolve This Problem ?

S
SemiColonWebSTAFFNov 24, 2017

Hello,

Thanks for your Patience!

  1. We have tried viewing your Website but it shows that your Website is not Online. Can you please provide us with a Live URL?

  2. To add a Youtube Video BG to your Slide, you can simply use the following code:

<div class="rs-background-video-layer"
	data-ytid="M18TITevyhA"
	data-volume="100"
	data-forcerewind="on"
	data-nextslideatend="true"
	data-videoloop="loopandnoslidestop"
	data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&
	origin=http://www.yourwebsite.com"
></div>

Make sure that you have changed the value of the data-ytid="M18TITevyhA" Attribute with your Youtube ID.

You can check out the Complete Documentation here: https://www.themepunch.com/revsliderjquery-doc/backgrounds-image-video/#youtube-video-background .

Hope this Helps!

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

O
onareNov 27, 2017

ok.i will try.but my slider not shows videos on mobile phone.how can i do it ?

O
onareNov 27, 2017

O
onareNov 28, 2017

Revulation Slider not autoplay videos ios ans some android telephones

S
SemiColonWebSTAFFNov 28, 2017

Hello,

Please use the codes we have provided you above. The codes you have used is incorrect! Find the following incorrect code on your Page: 

<div class="rs-background-video-layer"   data-volume="0"
	data-forcerewind="on"
	data-nextslideatend="true"
	data-videoloop="loopandnoslidestop" data-video="https://youtu.be/RoEj1P1erjw"></div>

and replace it with the following code: 

<div class="rs-background-video-layer"
	data-ytid="RoEj1P1erjw"
	data-volume="100"
	data-forcerewind="on"
	data-nextslideatend="true"
	data-videoloop="loopandnoslidestop"
	data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&
	origin=http://www.yourwebsite.com"
></div>

This should definitely work fine. Hope this Helps!

Additionally, it is recommended to disable RocketScript functionality in Cloudflare for the Website to function correctly.

Meanwhile, we are still checking out the issue with Revolution Slider on Mobile Devices.

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