How to display a youtube video in parallax widget
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget .
<div class="is-fullwidth bg-section rel h-100 is-parallax is--flex video-hero" style=
"background: url('https://u.jimcdn.com/cms/o/s1aeecbbb2a5865b1/userlayout/img/video-parallax.jpg?t=1594537768') no-repeat center;">
<div class="hs-overlay opacity-8">
</div>
<div class="inner rel color-white m-padding cc-clearover" style="padding:250px 0;">
<div class="col-6 center-align">
<h1 class="">
This is video parallax
</h1>
<p>
The text color in this example is white. You can add here anything what you want: title, simple text, links, button or custom widget .
</p>
<br />
<a class="popup-youtube link-outlined link-white weight-500" href="https://www.youtube.com/watch?v=hGCPj32plSU">Youtube video</a>
</div>
</div>
</div>
<!-- new tubular in Widget/HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// ytplayer
$("#hs-video").YTPlayer();
});
})(jQuery);
//]]>
</script>
<div id="hs-video" class="player" data-property=
"{videoURL:'https://www.youtube.com/watch?v=hGCPj32plSU',containment:'.video-hero',autoPlay:true, mute:true, startAt:0,useOnMobile:false,showControls:false, opacity:1}">
</div>
Add youtube url into 2 places: for fullwidth desktop video and the video in popup which is necessary for mobile devices.
The fullwidth video in mobile and tablet devices will be replaced by the image.
Please note that in case you're using more than one youtube parallax in one page, you need to change the class video-hero. Each parallax video should have a unique class!
Important notes!
Using this plugin, you'll need to setup the cookies.
Please log in to your website and in admin mode navigate:
Settings> Privacy & Security> Cookies> Create Cookies and add the following text:
YouTube Cookies - PREF, VISITOR_INFO1_LIVE, YSC
Description: these cookies are set by www.youtube.com. We use YouTube's Privacy Enhanced mode to embed video on our site which means that YouTube won't store information unless you play the video. Please refer to Google's Privacy Policies & Principles for more information.
Duration: PREF and VISITOR_INFO1_LIVE: up to 8 months
YSC: expires when you close your browser.