<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 full-width section
            </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>

Insert the YouTube URL in two locations: one for the full-width desktop video and another for the video in the popup, which is essential for mobile devices.

The full-width video on mobile and tablet devices will be replaced by an image.

Note that if you're using more than one YouTube parallax on a single page, you must modify the class 'video-hero.' Each parallax video should have a unique class.