Codeopen.io da çalışan popup site localhostumda ya da sunucuda çalışıyor. Nedeni ne olabilir?

codeop.io üzerinden "Play YouTube or Vimeo Video in Modal - Bootstrap 4" diye bir şey buldum. Aradığım şeydi tamda. İlk önce codeopen.io üzerinden denemek için kendim oluşturdum ve kopyala yapıştır yaptım. (Settings kısımlarında script:src ve style linkleride vardı onlarıda aldım) Ardından ise localhost üzerinde denemel için index.html oluşturdum. Kodların hepsini aynı şekilde kopyaladım ama popup gelmedi.
Kodlar:

<!doctype html>
<html lang=en>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>Document</title>
    <link rel=stylesheet href=https://cdn.jsdelivr.net/gh/JacobLett/bootstrap4-latest@master/bootstrap-4-latest.min.css>
    <style>
        body {
            margin: 2rem
        }

        .modal-dialog {
            max-width: 800px;
            margin: 30px auto
        }

        .modal-body {
            position: relative;
            padding: 0
        }

        .close {
            position: absolute;
            right: -30px;
            top: 0;
            z-index: 999;
            font-size: 2rem;
            font-weight: 400;
            color: #fff;
            opacity: 1
        }
    </style>
</head>
<body>
    <div class=container>
        <h1>Play YouTube or Vimeo Videos in Bootstrap 4 Modal</h1>
        <button type=button class="btn btn-primary video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/Jfrjeg26Cwk data-target=#myModal>
Play Video 1 - autoplay
</button>
        <button type=button class="btn btn-primary video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/IP7uGKgJL8U data-target=#myModal>
Play Video 2
</button>
        <button type=button class="btn btn-primary video-btn" data-toggle=modal data-src=https://www.youtube.com/embed/A-twOC3W558 data-target=#myModal>
Play Video 3
</button>
        <button type=button class="btn btn-primary video-btn" data-toggle=modal data-src="https://player.vimeo.com/video/58385453?badge=0" data-target=#myModal>
Play Vimeo Video
</button>
        <div class="modal fade" id=myModal tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=true>
            <div class=modal-dialog role=document>
                <div class=modal-content>
                    <div class=modal-body>
                        <button type=button class=close data-dismiss=modal aria-label=Close>
<span aria-hidden=true>&times;</span>
</button>
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class=embed-responsive-item src="" id=video allowscriptaccess=always allow=autoplay></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=7"></script>
    <script src=https://cdn.jsdelivr.net/gh/JacobLett/bootstrap4-latest@master/bootstrap-4-latest.min.js></script>
    <script src=https://code.jquery.com/jquery-3.1.1.slim.min.js></script>
    <script>
        $(document).ready(function() {
            var n;
            $(".video-btn").click(function() {
                n = $(this).data("src")
            }), console.log(n), $("#myModal").on("shown.bs.modal", function(o) {
                $("#video").attr("src", n + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0")
            }), $("#myModal").on("hide.bs.modal", function(o) {
                $("#video").attr("src", n)
            })
        })
    </script>
</body>
</html>

Almış olduğum hataları.