Control Vimeo Video Using Javascript

Design help Custom code
1

Hey Guys,

Had succes with controlling youtube’s api: Video | Webflow University

Now I’m trying to do the same with Vimeo but have no succes yet.

@bartekkustra could you perhaps explain to me the steps i should take to achieve similar results like the ‘how to control youtube…’ article mentioned above.

Perhaps as an example. How can i make this code work in Webflow? https://codepen.io/bdougherty/pen/JgDfm

Cheers,

Mark

2

Hi,

Usually people say the opposite: piece of cake with Vimeo, Hell on Earth with Youtube :slight_smile:

I wouldn’t know I’m not a coder. But I have a WF site in dev working with the Vimeo API. My associate wrote the code for it, I’m going to track it down and paste it below. We use it to open the targeted video, and to automatically stops the playing when you close a popup so you don’t end up having tons of videos loading and playing at the same time.

On the <head> we have:

<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>

Before we have:

<script>
jQuery(function() {
	var $ = jQuery, player,
		vimeoBase = '//player.vimeo.com/video/';
		
    $(document)
    	.on('click', '.close-video-button', function () {
    		var iframe = getIframeJQElement()[0];
	    	player = $f(iframe);
	    	if(!player) return;
	    	player.api('unload');
	    })
	    .on('click', '.badge', function(e) {
			var iframe  = getIframeJQElement(),
				url = $(this).find('.link-film').attr('href'),
				playerUrl = getPlayerUrl(url, $(iframe).attr('src'));
			$(iframe).hide().attr('src', playerUrl);
			e.preventDefault();
		});

	getIframeJQElement().on('load', function() {
		$(this).show();
	})

	function getPlayerUrl(href, src) {
		var matchVimeo = href.match(/vimeo.com\/(\d+)$/);
		if(!matchVimeo) return src;
		var vid = matchVimeo[1],
			params = src.split('?');
		return vimeoBase + vid + (params.length > 1 ? '?' + params[1] : '?api=1' );
	}
	function getIframeJQElement() {
		return $('.video-player').find('iframe');
	}
});
</script>

In the site designer, the video is simply declared on a link block:

http://vincent.polenordstudio.fr/snap/qf6h0.jpg

There’s a unique interaction, opening a unique popup, for every badges elements:

http://vincent.polenordstudio.fr/snap/bosg7.jpg

The video player popup contains a classic custom code for a Vimeo player, inside a custom code Webflow widget. Whatever the video used for this custom player code, it’s not important, as the JS is going to rewrite that part with the link you set on the badge, before the popup appears:

http://vincent.polenordstudio.fr/snap/40lil.jpg

Hope this helps. Can’t share the actual site sorry.

1 Like
3

Thanks for sharing Vincent :smile:

Cool to see how you guys cracked the code for your site. I’m just looking for the basics and trying to figure out how i get this code ( https://codepen.io/bdougherty/pen/JgDfm ) working on Webflow. It seems like i get all the steps right but get stuck with controlling the buttons. For the youtube api you use `javascript:playthevideo(); in the url link to control the functions but with the Vimeo player this trick ain’t working.

Anyway thanks for your examples!