HTML5 and CSS - Responsive Video Pop Up Not working according to design

Question

I am building an online portfolio and am running into an issue with the video popup.

What happens now is that when you click on it, it loads everything as a new page. Then it opens a small video followed by immediately popping it full screen. You have to press back to go back to the portfolio page. And once there, the full screen video (usually) hovers whenever you are near the picture you launched it from.

Essentially I need to have a photo/text that acts as a button. You click on it and it pops open a floating responsive video on the same page. You click on the close or anywhere else and it goes away and you're still on the same page.

Here's an active link to the test portfolio page in question. Lots of dead links in there - just reference the 1st Aquaman image. https://www.marksantora.com/portfolio_test/portfolio_test.html

Thanks for any help!

Here's the HTML Code for the image/pop up:

<div class="col-lg-4 col-md-6 items theatrical social">
 <div class="item mt-40">
  <div class="img">
   <img src="assets/imgs/website_new/portfolio_img/aquaman_and_the_lost_kingom_01p.jpg" alt="">
    <div class="cont d-flex align-items-center">

    <div id="light">
      <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
      <video id="Aquamanandthelostkingdom" controls> <source src="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4">
      </video>
    </div>

    <div id="fade" onClick="lightbox_close();"></div>
                    
        <div>
     <h5 class="fz-22">
      <a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" onclick="lightbox_open();">Aquaman and the Lost Kingdom</a>
     </h5>
     <p>
      <a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" onclick="lightbox_open();">Blood Is Thicker Than Water</a>
      </p>
    </div>                              

        <div class="ml-auto">
         <a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" class="ti-arrow-top-right"></a>
        </div>
       </div>
      </div>
     </div>
    </div>

And the CSS:

/* HTML 5 Video playing in a lightbox
-----------------------------------------------------------------*/

#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: relative;
  top: 50%;
  left: 50%;
  max-width: auto;
  max-height: auto;
  margin-left: auto;
  margin-top: auto;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 10000;
  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;
}

Answer 1

There are a few issues that you need to address. The first issue is that you must stop the browser from navigating to the video URL specified in a href.

To achieve this, you need to return false from your onclick handler, like so:

<a href="../H264/aquaman2_BloodIsThickerThanWater.mp4"
  onclick="return lightbox_open()">Aquaman and the Lost Kingdom</a>

and then

function lightbox_open() {
  ...
  return false;
}

Another major problem is that your lightbox_open references an element with an id that doesn't exist, i.e. VisaChipCardVideo

I guess (from your lightbox_close) that it must be Aquamanandthelostkingdom, like so:

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

After fixing these two problems, the browser will not navigate to the video URL, and your lightbox will show up.

The next step would be to properly implement lightbox behavior to look and behave like a modal popup, preventing the user from interacting with the website while the lightbox is visible.

You can look at this example: https://www.w3schools.com/howto/howto_js_lightbox.asp or use some popular lightbox JS components.

Please let me know if this helps.