Error opening video via modal

Question

I’m trying to open a video using modal but without success.

I ask for help in this error and solution.

I try to do this: When the mouse passes over the button, the JS, already puts the URL inside the iframe, and when you click opens the modal.

$(document).ready(function() {

  $(".link").mouseover(function() {
    var href = $(this).attr('href');
    $('.iframe').attr('src', href)
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">





<button href="https://www.youtube.com/embed/HVAR85rorvU" class="btn btn-danger link" data-toggle="modal" data-backdrop="static"><i class="fa fa-video-camera"></i> Vídeo 1</button>

<button href="https://www.youtube.com/embed/nQWFzMvCfLE" class="btn btn-danger link" data-toggle="modal" data-backdrop="static"><i class="fa fa-video-camera"></i> Vídeo 2</button>


<div id="modal-form" class="modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item iframe" src="iframe.php" target="_parent" allowfullscreen></iframe>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i>Fechar</button>
      </div>

    </div>
  </div>
</div>

Error: