Javascript 如何在点击图像时将 vimeo 播放器添加到弹出窗口中..???
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12508300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add vimeo player into pop up window when it clck on Image..???
提问by Shashika Nanayakkara
I want to add video into my website. But I want to play that video within pop up window when user click on image. How can I do that.??
我想将视频添加到我的网站。但是我想在用户单击图像时在弹出窗口中播放该视频。我怎样才能做到这一点。？？
I want to create that look like this website. https://www.shoplocket.com/
我想创建看起来像这个网站。 https://www.shoplocket.com/
Thanxx :)
谢谢 :)
回答by Boyye
Well first of all you should know what kind of popup you want. Just a new screen or a nice effect like the website you provided.
那么首先你应该知道你想要什么样的弹出窗口。只是一个新屏幕或像您提供的网站一样的好效果。
In the last case you could look at some popular popup possibilities like lightbox, fancybox,... Depending on the plugin you choose, you'll have to check their documentation to embed video's.
在最后一种情况下，您可以查看一些流行的弹出窗口，例如lightbox、fancybox……根据您选择的插件，您必须查看他们的文档以嵌入视频。
Good luck!
祝你好运！
回答by HymanTurky
回答by Damian Roszak
To play a video put it as content of a popup
要播放视频，请将其作为弹出窗口的内容
<video id="videoPop" class="video" controls >
<source src="adress">
</video>
This is popup itself:
HTML:
这是弹出窗口本身：
HTML：
<div class="popup" onclick="myFunction()">Click me!
<span class="popuptext" id="myPopup">Popup text...</span>
</div>
JS:
JS：
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>
When I write this the website you mentioned does not work, so I live CSS for you.
当我写这篇文章时，你提到的网站不起作用，所以我为你使用 CSS。
No you need HTML trigger:
不，您需要 HTML 触发器：
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
回答by Praveen Kumar Purushothaman
Use PrettyPhoto.
使用PrettyPhoto。
Check out the Vimeo Content in it.
查看其中的 Vimeo 内容。
To open Vimeo content with it simply:
- Create a link (<a href="#"></a>).
- Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
- Change the href of your link so it points to the Vimeo video page, the same link you would share with friends.
简单地用它打开 Vimeo 内容：
- 创建链接（<a href="#"></a>）。
- 给它添加 rel 属性“prettyPhoto”（rel=”prettyPhoto”）。
- 更改链接的 href 以使其指向 Vimeo 视频页面，这与您将与朋友分享的链接相同。
Code:
代码：
<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>
