Video Popups

<div class="video-container" onclick="openVideo(this)" data-src="?autoplay=1">
    <picture>
        <img src="/assets/images/" alt="">
    </picture>
    <h2></h2>
    <img class="play-arrow" src="/assets/images/play-arrow.png" alt="play video arrow">
</div>
<div class="video-popup" style="display:none">
    <div class="bodyOverlay" onclick="closeVideo(this)"
        style="position: fixed;height: 100vh;width: 100vw;background: rgba(0,0,0,.8);left: 0;top: 0;"></div>
    <iframe width="560" height="315" class="lazyload" src="" title="YouTube video player" frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
        loading="lazy"></iframe>
</div>

<script>
    function openVideo(e) {
        e.nextElementSibling.style.display = "block";
        document.querySelector('body').style.overflow = "hidden";
        var iframeLink = e.getAttribute('data-src');
        e.nextElementSibling.querySelector('iframe').setAttribute('src', iframeLink);
    }
    function closeVideo(e) {
        e.parentElement.style.display = "none";
        document.querySelector('body').style.overflow = "scroll";
        e.nextElementSibling.setAttribute('src', "");
    }
</script>

    <style>
    .video-popup {position: fixed;left:25%;top: calc(50vh - 15vw);z-index:99;
    iframe {width:52vw;height:30vw;position:relative}}
    </style>

Popup Text

    <div class="popup-group">
        <div class="popup-container">
            <div class="quote-popup">
                <div class="content-button" onclick="openQuote()">
                    <p>Click Here</p>
                </div>
            </div>
        </div>
        <div class="popup" style="display:none" onclick="closeQuote()">
            <p>Popup Text Here <span class="closing-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
            style="height:1vw;width:1vw;float:right;">
            <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license
            (Commercial License) Copyright 2022 Fonticons, Inc. -->
            <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47
            47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4
            9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
            </svg></span></p>
            <div class="bodyOverlay" onclick="closeQuote()"
            style="position: fixed;height: 100vh;width: 100vw;background: rgba(0,0,0,.4);left: 0;top: 0;"></div>
        </div>
    </div>

<script>
    function openQuote() {
        document.querySelector(".popup").setAttribute("style", "display:flex;");
        document.querySelector('body').style.overflow = "hidden";
    }
    function closeQuote() {
        document.querySelector(".popup").setAttribute("style", "display:none;");
        document.querySelector('body').style.overflow = "scroll";
    }
</script>

    <style>
        /************* POPUP BOX ****************/
            .popup-group{position: relative;}
            .popup p {
                background-color: #fff;
                border-radius: .9vw;
                width:41vw;
                padding:1.5vw;
                border:.5px solid #464646;
                line-height:1.4;
                display: inline-block;
                position: relative;
                z-index: 1;
            }
            .popup {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                z-index: 9999999999;
            }
            .content-button{
                border:1px solid #000;
                width:15%;
                text-align: center;
            }

    </style>