如何更改var img ='';到var vid ='';具有弹出视频标签功能

Question

我有一个代码可以打开带有弹出图像的链接。完美的作品。我需要更改JavaScript才能打开带有弹出html5视频而不是图像的链接。

var img = '';
$('.link-img-opener').click(function() {
  img = $(this).attr('id')
  $('#img-shower').children('img').attr("src", 'img/' + img + '.jpg');
  $('#img-shower').addClass('show-shower', 500, function() {
    $('#close-img').fadeIn(100);
    $('html').css({
      'overflow-y': 'hidden'
    });
  });
});

$('#close-img').click(function() {
  $('#close-img').fadeOut(100, function() {
    $('#img-shower').removeClass('show-shower', 500);
    $('html').css({
      'overflow-y': 'scroll'
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is link opener -->
<a class="link-img-opener" id="image name without .jpg suffix">image title</a>

<!-- This is div where image is showed -->
<div class="img-shower" id="img-shower">
  <img src="img/sample2.jpg" alt="">
</div>
<i class="material-icons hover-pointer close-img" id="close-img">close</i>