Home Forums Porto Template youtube video cannot autoplay using revoslider

This topic contains 2 replies, has 2 voices, and was last updated by  Support2 2 months ago. This post has been viewed 278 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10027362

    mtruck
    Participant

    Hello,
    I still got problems while using autoplay youtube video into a revolution slider container.
    For better explaining, I’ve attached Here a website link showing the error I am talking about.

    https://www.maurelligroup.com/

    I really cannot find any solution.
    I’ve just read this
    http://forums.artbees.net/t/slider-revolution-update-needed-chromes-video-autoplay-new-policies/13020/6
    but this is strange …. still no update available for this bug after 3 months ? Any tested and fully functionally workaround ?

    Thx for your time and support.

    I hope to hear from you soon.

    F.


    #10027366

    Support2
    Keymaster

    Hello,

    Unfortunately doesn’t exists any workaround for autoplay videos at moment. Due to Google Chrome new autoplay policy (the autoplay only works when the user has a high engagement with the website). You can read more about that here: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

    Kind Regards,

    Rodrigo.


    #10027379

    Support2
    Keymaster

    Hello,

    The Revolution Slider team released a new version where automatically “mute” the videos that has “autoplay” defined. To get a revolution slider autoplay video working, please follow the steps below:

    1) Download the latest version of Revolution Slider on link below:
    https://www.dropbox.com/s/cdocp8a37xqqzlh/revslider-plugin.zip?dl=0

    Extract the folder on the path “/vendor” of your project.

    2) Here is a example code of muted video with autoplay:

    <div class="slider-container rev_slider_wrapper">
    	<div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 500, 'gridheight': 500, 'responsiveLevels': [4096,1200,992,500]}">
    		<ul>
    			<li data-transition="fade">
    				<img src="video/landing.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="rs-background-video-layer" 
    					data-forcerewind="on" 
    					data-volume="mute" 
    					data-videowidth="100%" 
    					data-videoheight="100%" 
    					data-videomp4="video/landing.mp4" 
    					data-videopreload="preload" 
    					data-videoloop="loop" 
    					data-forceCover="1" 
    					data-aspectratio="16:9" 
    					data-autoplay="true" 
    					data-autoplayonlyfirsttime="false" 
    					data-nextslideatend="false" 
    				></div>
    
    			</li>
    		</ul>
    	</div>
    </div>

    * Note the data-volume="mute".

    3) Here is a example for youtube video with autplay:

    <div class="slider-container rev_slider_wrapper">
    	<div id="revolutionSlider" class="slider rev_slider manual" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 500, 'gridheight': 500, 'responsiveLevels': [4096,1200,992,500]}">
    		<ul>
    			<li data-transition="fade">
    				<img src="video/landing.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="tp-caption tp-resizeme tp-videolayer fullscreenvideo" 
    
    				    data-type="video" 
    				    data-start="0"
    				    data-ytid="iyuxFo-WBiU" 
    				    data-videowidth="100%" 
    				    data-videoheight="100%" 
    				    data-autoplay="on" 
    				    data-videocontrols="none" 
    				    data-nextslideatend="true" 
    				    data-forcerewind="on" 
    				    data-videoloop="loopandnoslidestop" 
    				    data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&origin=http://www.okler.net;" 
    				    data-x="center" 
    				    data-y="center" 
    				    data-hoffset="0" 
    				    data-voffset="0" 
    				    data-basealign="slide"></div>
    				
    			</li>
    		</ul>
    	</div>
    </div>

    We will update the Revolution Slider on the next version of Porto.

    You can also autoplay videos without the Revolution Slider (with tag <video> of HTML5). Just remember to set the attribute muted, for example:

    <video controls muted autoplay>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 3 posts - 1 through 3 (of 3 total)