原生JS 弹窗视频

<a href="#" class="play-st">
    <img src="//cdn.myxypt.com/4a5ac36e/24/05/070129b3e4f8d54255cc32c5b2b07f83e3c378ba.png" alt="">
</a>

<!-- Modal -->
<div id="myModal2" class="modal2">
    <div class="modal-content2">
        <div class="max1200">
            <span class="close2">&times;</span>
            <video id="modalVideo2" class="modal-video2" muted controls autoplay>
                <source src="{{ app('section').id(87825).content.link | videos_url }}" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        // Get the modal
        var modal = $('#myModal2');
        // Get the button that opens the modal
        var btn = $('.play-st');
        // Get the <span> element that closes the modal
        var span = $('.close2');
        // When the user clicks the button, open the modal 
        btn.click(function(e) {
            e.preventDefault();
            modal.show();
        });
        // When the user clicks on <span> (x), close the modal
        span.click(function() {
            modal.hide();
            $('#modalVideo2')[0].pause();
        });
        // When the user clicks anywhere outside of the modal, close it
        $(window).click(function(event) {
            if ($(event.target).is(modal)) {
                modal.hide();
                $('#modalVideo2')[0].pause();
            }
        });
    });
</script>



<style type="text/css">
.modal2{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}
.modal-content2{position:relative;background-color:rgba(0,0,0,.8);-webkit-background-clip:padding-box;background-clip:padding-box;outline:0;display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%}
.close2{font-size:51px;font-weight:700;line-height:1;color:#fff;text-shadow:0 1px 0 #fff;opacity:.8;cursor:pointer;text-align:right;display:block}
.modal-video2{cursor:pointer;display:block;width:100%}
.modal-video2 video{width:100%}
</style>