CODEWITHSUNDEEP
javascriptjqueryvimeovimeo-api
Jibes
Jibes

Reputation: 955

Autoplay Vimeo video on click in modal

How can I autoplay Vimeo video I have in iframe in bootstrap modal window on image click?

I've done this before using YouTube JavaScript API but have no idea how this works with Vimeo. I see they also have some API but could use some pointers how this would work.

First tried appending ?autoplay=1 to iframe video src attribute in modal on image click using jQuery but that didn't work.

When the modal hides before video is done I also need to stop() the video from running in background.

Any pointers in the right direction greatly helpful!!! Thank you!

Upvotes: 4

Views: 13061

Answers (3)

Mike J
Mike J

Reputation: 51

I tried the appending the iframe's source with '?autoplay=1' like you'd mentioned:

$("iframe")[0].src += "?autoplay=1";

Seems to work for me. I believe the iframe also needs to include 'allow="autoplay"' though for example:

<iframe src="YOURVIDEOURL" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay">

To stop the video on click - I imagine appending the src, removing '?autoplay=1' would then also work.

Hope this helps somebody!

Upvotes: 5

gulawaiz
gulawaiz

Reputation: 11

If you are trying to autoplay vimeo video on an image click then this might be helpful, I had the same problem of playing video on image click but finally found this solution. 

<div id="modal-Id">
   <div id="parent-div">
     <img id="vimeo-videoId" src="images/your-image.png" onclick="return imgClick();" />
   </div>
</div>

 function imgClick() {
                jQuery('#your-imageId').hide();  //hide image to play the video
                var ifrm = document.createElement("iframe");
                ifrm.setAttribute("src", "https://player.vimeo.com/video/123456789?autoplay=1");
                ifrm.style.width = "496px";
                ifrm.style.height = "277px";
                // add rest of your values
                ifrm.frameborder = 0;
                document.getElementById("your-parent-Div").appendChild(ifrm);  //append it to your parent div 
                return false;
            }

Upvotes: 0

jrue
jrue

Reputation: 2560

If you're familiar with jQuery, I wrote a plugin which simplifies controlling a Vimeo video with standard jQuery notation.

https://github.com/jrue/Vimeo-jQuery-API

$("#yourvideo").play();

Upvotes: 0

Related Questions