javascript - How to add vimeo player into pop up window when it clck on Image..??? - Stack Overflow

admin管理员组

文章数量:1357672

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

Thanxx :)

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

Thanxx :)

• javascript
• html
• css

Share Improve this question Follow asked Sep 20, 2012 at 7:57 Shashika NanayakkaraShashika Nanayakkara 111 gold badge11 silver badge11 bronze badge 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

You could use colorbox

see here for example

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.

Good luck!

Use PrettyPhoto.

Check out the Vimeo Content in it.

To open Vimeo content with it simply:

1. Create a link (<a href="#"></a>).
2. Add the rel attribute “prettyPhoto” to it (rel=”prettyPhoto”).
3. Change the href of your link so it points to the Vimeo video page, the same link you would share with friends.

Code:

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

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:

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

When I write this the website you mentioned does not work, so I live CSS for you.

No you need HTML trigger:

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

本文标签： javascriptHow to add vimeo player into pop up window when it clck on ImageStack Overflow