HTML5 和 CSS - 响应式视频弹出窗口未按设计工作

Question

我正在构建一个在线作品集，但遇到了视频弹出窗口的问题。

现在发生的情况是，当您单击它时，它会将所有内容加载为新页面。然后它会打开一个小视频，然后立即将其全屏弹出。您必须按返回才能返回投资组合页面。一旦到达那里，只要您靠近启动它的图片，全屏视频（通常）就会悬停。

本质上我需要一张照片/文本作为按钮。您单击它，它会在同一页面上弹出一个浮动响应视频。您单击“关闭”或其他任何位置，它就会消失，您仍然在同一页面上。

这是指向相关测试组合页面的活动链接。那里有很多死链接 - 只需参考第一张海王图片即可。 https://www.marksantora.com/portfolio_test/portfolio_test.html

感谢您的帮助！

这是图像/弹出窗口的 HTML 代码：

<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>

还有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

看起来你的

a href

有两种作用。首先，它调用

onClick="lightbox_close();"

，它开始显示灯箱。第二个操作是此处的标准行为，这会导致通过导航到视频的 URL 来打开视频本身。

您想保留第一个但阻止第二个，即您不希望浏览器导航到视频的 URL。

有几种方法可以实现这一目标。

第一种方法是通过返回

a href

来停止标准

false

行为，如下所示：

<a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" onclick="return lightbox_open();">Aquaman and the Lost Kingdom</a>

注意

return

。然后，在

lightbox_open

的末尾，您只需添加

  ...
  return false;
}

第二个选项是在事件上调用

preventDefault

。

<a href="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4" onclick="lightbox_open">Aquaman and the Lost Kingdom</a>

请注意，未指定

lightbox_open

参数，并且没有

()

和

return

。

然后你需要像这样修改

lightbox_open

：

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

注意

event

参数和

event.preventDefault();

。 这将停止进一步的事件处理，从而阻止导航到

href

中指定的 URL。

如果这有帮助，请告诉我。