Código Lightbox Imagen

<!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>Tema CiberT</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link href="css/overwrite.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  
  <style>
      #fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600px;
  max-height: 360px;
  margin-left: -300px;
  margin-top: -180px;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002;
  overflow: visible;
}

#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

#fade:hover ~ #boxclose {
  display:none;
}

.test:hover ~ .test2 {
  display: none;
}
</style>
</head>

<body>
  <div class="row">
    <div class="col-md-2">
      <div class="menu">
        <div class="logo">
          <a href="index.html"><h1>HACKER</h1></a>
          <span>Estilo &amp; Diseño</span>
        </div>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="">
						<span class="sr-only">Navegacion</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
          <ul class="nav nav-pills nav-stacked">
            <li role="presentation"><a href="index.html">Inicio</a></li>
            <li role="presentation"><a href="about.html">Acerca de</a></li>
            <li role="presentation"><a href="graphics.html">Porfolio</a></li>
            <li role="presentation"><a href="experience.html">Experiencia</a></li>
            <li role="presentation"><a href="contact.html">Contacto</a></li>
          </ul>

        </div>
        <div class="footer">
          &copy; CiberT.
          <div class="credits">
            
              Editato por <a href="https://www.ciberterror.com/">CiberT</a>
            </div>

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

  <div class="">
    <div class="">
      <div class="col-md-6 col-md-push-2">
        <section id="contact-page">
          <div class="container">
            <div class="center">
              <h2>VIDEO EMERGENTE</h2>
              <p class="lead">CIBERTERROR.COM</p>
            </div>
            <div class="col-md-8 col-md-offset-2">
<center><h3>CSS/Javascript popup de Imagen, con efecto Lightbox</h3></center>
<br>
<div id="light">
  <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
  <video id="VisaChipCardVideo" width="600" controls><a title="Ciber T" href="http://www.ciberterror.com"><a href="#" onclick="lightbox_open();" img src="https://www.ciberterror.com/wp-content/uploads/2019/11/ciberterror.png" alt="Ciber T" width="100" height="100"/></a>
      <source src="https://www.ciberterror.com/personal-ciberterror/Personal/videos/infierno-tv.mp4" type="video/mp4">
      <!--Browser does not support <video> tag -->
    </video>
</div>

<div id="fade" onClick="lightbox_close();"></div>

<div>
  
</div>
<div id="fade" onClick="lightbox_close();"></div>

<div>
  <center><a href="#" onclick="lightbox_open();" a title="Ciber T" href="http://www.ciberterror.com"><img src="https://www.ciberterror.com/personal-ciberterror/Personal/hell.png" alt="Ciber T" width="305" height="170"/></a>

<center><div class="test">Ciberterror.com</div></center>

            
              <form action="" method="post" role="form" class="contactForm">
                <div class="form-group">
                  

                <div class="text-center"><a href="http://www.ciberterror.com/personal-ciberterror/Personal/lightbox-galeria.html" button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Lightbox Galería</a></button></div>

                
              </form>

            </div>
          </div>
          <!--/.container-->
        </section>
        <!--/#contact-page-->
      </div>
    </div>
  </div>



  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script type="text/javascript" src="js/fliplightbox.min.js"></script>
  <script type="text/javascript">
    $('#graphics').flipLightBox()
  </script>
  <script src="contactform/contactform.js"></script>
<script>
    window.document.onkeydown = function(e) {
  if (!e) {
    e = event;
  }
  if (e.keyCode == 27) {
    lightbox_close();
  }
}

function lightbox_open() {
  var lightBoxVideo = document.getElementById("VisaChipCardVideo");
  window.scrollTo(0, 0);
  document.getElementById('light').style.display = 'block';
  document.getElementById('fade').style.display = 'block';
  lightBoxVideo.play();
}

function lightbox_close() {
  var lightBoxVideo = document.getElementById("VisaChipCardVideo");
  document.getElementById('light').style.display = 'none';
  document.getElementById('fade').style.display = 'none';
  lightBoxVideo.pause();
}
</script>
</body>

</html>