How to add youtube video as slider with autopay

Home Forums Porto – Responsive HTML5 Template How to add youtube video as slider with autopay

  • This topic has 3 replies, 2 voices, and was last updated 9 months ago by Support. This post has been viewed 771 times
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10043731
    9t9sol
    Participant

    Hi, we want to add a YouTube video link as a slider background video as in demo link (https://www.okler.net/previews/porto/9.9.3/index-classic-video.html), can you please guide us how we can achieve that and also want to add a play button like in demo link (https://www.okler.net/previews/porto/9.9.3/demo-event.html)


    #10043734
    Support
    Keymaster

    Hello, we do not recommend using youtube videos for background, because the autoplay does not work and also there are some “ads” in the videos.

    That video from the link you sent is a MP4 video that is in the server, here’s the code:

    <section class="section border-0 video overlay overlay-show overlay-op-8 m-0" data-video-path="video/memory-of-a-woman" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;">
    	<div class="container position-relative z-index-3 h-100">
    		<div class="row align-items-center h-100">
    			<div class="col">
    				<div class="d-flex flex-column align-items-center justify-content-center h-100">
    					<h1 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
    						<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
    							<img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
    						</span>
    						GET READY TO <span class="position-relative">SEE<span class="position-absolute left-50pct transform3dx-n50 top-0 mt-3"><img src="img/slides/slide-blue-line.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span>
    						<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
    							<img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
    						</span>
    					</h1>
    					<h1 class="text-color-light font-weight-extra-bold text-12 line-height-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">PERFECT VIDEOS</h1>
    					<p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">Check out our options and features</p>
    				</div>
    			</div>
    		</div>
    		<a href="#main" class="slider-scroll-button position-absolute bottom-10 left-50pct transform3dx-n50" data-hash data-hash-offset="0" data-hash-offset-lg="80">Sroll To Bottom</a>
    	</div>
    </section>

    The video is in the “video” folder. https://www.okler.net/previews/porto/9.9.3/video/memory-of-a-woman.mp4


    #10043741
    9t9sol
    Participant

    Hi, I know that video from the link I sent you is a MP4 video but instead of that mp4 I want to add a YouTube video link, and no issue regarding auto play,


    #10043742
    Support
    Keymaster

    Hello, so we recommend using Revolution Slider from this page:
    https://www.okler.net/previews/porto/9.9.3/index-slider-revolution.html

    Here is an example for Youtube video:

    <div class="slider-container rev_slider_wrapper" style="height: 670px;">
    	<div id="revolutionSlider" class="slider rev_slider" data-version="5.4.8" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 1170, 'gridheight': 670, 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,500], 'parallax': { 'type': 'scroll', 'origo': 'enterpoint', 'speed': 1000, 'levels': [2,3,4,5,6,7,8,9,12,50], 'disable_onmobile': 'on' }, 'navigation' : {'arrows': { 'enable': true }, 'bullets': {'enable': true, 'style': 'bullets-style-1', 'h_align': 'center', 'v_align': 'bottom', 'space': 7, 'v_offset': 70, 'h_offset': 0}}}">
    		<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>


    * See the “origin” in that code and change to your domain.

    Kind Regards,

    Okler Themes


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

This topic is marked as "RESOLVED" and can not rceive new replies.