javascript - 如何在图像上单击时将 vimeo 播放器添加到弹出窗口中..???

Question

我想将视频添加到我的网站中。但是当用户单击图像时，我想在弹出窗口中播放该视频。我怎样才能做到这一点。？？

我想创建一个看起来像这个网站的网站。 https://www.shoplocket.com/

谢谢 :)

Answer 1

你可以使用彩盒

例如见这里

Answer 2

那么首先你应该知道你想要什么样的弹出窗口。就像您提供的网站一样，只是一个新屏幕或一个不错的效果。

在最后一种情况下，您可以查看一些流行的弹出窗口可能性，例如lightbox、fancybox ......根据您选择的插件，您必须检查他们的文档以嵌入视频。

祝你好运！

Answer 3

使用漂亮照片。

查看其中的 Vimeo 内容。

简单地用它打开 Vimeo 内容：

1. 创建一个链接 (<a href="#"></a>)。
2. 将 rel 属性“prettyPhoto”添加到它（rel=”prettyPhoto”）。
3. 更改链接的 href，使其指向 Vimeo 视频页面，即与朋友分享的相同链接。

代码：

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

Answer 4

要播放视频，请将其作为弹出窗口的内容

<video id="videoPop" class="video" controls >
    <source src="adress">
</video>

这是弹出窗口本身：
HTML：

<div class="popup" onclick="myFunction()">Click me!
  <span class="popuptext" id="myPopup">Popup text...</span>
</div>

JS：

<script>
// When the user clicks on <div>, open the popup
  function myFunction() {
   var popup = document.getElementById('myPopup');
   popup.classList.toggle('show');
  }
</script>

当我写这篇文章时，你提到的网站不起作用，所以我为你生活 CSS。

不，您需要 HTML 触发器：

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>