How to display a youtube video in parallax 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!