Javascript Modal Yapımı

<a href="#" id="myBtn">
      <img decoding="async" id="myImg" alt="" src="video-play.jpg">
    </a>

    <div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <span class="close">×</span>
        <video id="myVideo" width="100%" class="modal-content" controls>
            <source src="video.mp4" type="video/mp4"></source>
            <!-- <source src="video.webm" type="video/webm"></source> -->
                Your browser does not support HTML video.
        </video>
        <div id="caption">nocopyright video</div>
    </div>

 jQuery(document).ready(function () {
        console.log("modal is ready");
        var modal = document.getElementById("myModal");
        var btn = document.getElementById("myBtn");
        var span = document.getElementsByClassName("close")[0];
        var myPlayer = document.getElementById("myVideo");

        btn.onclick = function (event) {
          modal.style.display = "block";
          event.preventDefault();
          myPlayer.play(); 
        };

        span.onclick = function (event) {
          modal.style.display = "none";
          myPlayer.pause(); 
        };

        window.onclick = function (event) {
          if (event.target == modal) {
            modal.style.display = "none";
            myPlayer.pause(); 
          }
        };
      });

#myImg {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        text-align: center;
      }

      #myImg:hover {
        opacity: 0.7;
      }

      /* The Modal (background) */
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 0px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
      }

      /* Modal Content (Image) */
      .modal-content {
        /* margin: auto; */
        display: block;
        width: 100%;
        max-width: 900px;
        height: 506px;
        position: relative;
		margin: auto;
		padding-top: 100px
      }

      /* Caption of Modal Image (Image Text) - Same Width as the Image */
      #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
      }

      /* Add Animation - Zoom in the Modal */
      .modal-content,
      #caption {
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
      }

      @-webkit-keyframes zoom {
        from {
          -webkit-transform: scale(0);
        }
        to {
          -webkit-transform: scale(1);
        }
      }

      @keyframes zoom {
        from {
          transform: scale(0);
        }
        to {
          transform: scale(1);
        }
      }

      /* The Close Button */
      .close {
        position: absolute;
        top: 35px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
      }

      .close:hover,
      .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
      }

      /* 100% Image Width on Smaller Screens */
      @media only screen and (max-width: 700px) {
        .modal-content {
          width: 100%;
          left: 0;
          margin-left: 0;
        }
        #myImg {
            width: 100%;
        }
      }
      body {
        text-align: center;
      }