Autoplay Vimeo video on click in modal

javascript jquery vimeo vimeo-api
Jibes picture Jibes · Jun 3, 2014 · Viewed 9.5k times · Source

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!

Answer

Mike J picture Mike J · Dec 4, 2018

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!

Related questions

How to stop a Vimeo video with jQuery

When I hide a YouTube video, it stops playing. However, this is not the case for Vimeo videos. Is there another way to stop a Vimeo video?

Read More
Vimeo Froogaloop API not recognizing an event

I'm trying to recognize the onPlay, onPause, and onFinish event for vimeo using the froogaloop API. I've tried everything I could imagine with this thing, and no luck. I get this error on Firefox: And in Chrome: Importing froogaloop from …

Read More
Passing data outside ajax call, jQuery

I'm getting vimeo thumbnails from the API and I'm using a jQuery function to append the data to the dom. I'm trying to access thumb_url outside ajax, so I can return it to jQuery, but it doesn't work. function …

Read More