Categories: DevelopmentJavascript

Embedding Vimeo Video using Froogaloop

1. Add Vimeo iframe

  1. <iframe id="vimPlayer" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

2. Load Froogaloop and add some Javascript

  1. var vimID = "";
  2. var playerID = "vimPlayer";
  3.  
  4. $("#vimPlayer").attr("src", "//player.vimeo.com/video/"+vimID+"?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=f00010&player_id="+playerID);
  5.  
  6. Froogaloop(jQuery('#'+playerID)[0]).addEvent('ready', ready);
  7.  
  8. function ready(playerID){
  9.        
  10. Froogaloop(playerID).addEvent('play', play(playerID));
  11. Froogaloop(playerID).addEvent('seek', seek);
  12. Froogaloop(playerID).api('play');
  13. }
  14.        
  15. function play(playerID){
  16.   alert(playerID + " is playing");
  17. }
  18. function seek() {
  19. alert('Seeking');
  20. }

This will add a READY event for the player, which allows you to handle other stuff within that function from that point on. Like making the video responsive using fitVid for example :)

Its important that you reference the playerID in the actual iframe source or the ready function will never fire !

Vimeo Player API

Alex

I am a full-stack developer. I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing. I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest. Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Recent Posts

B&B / Hotel Booking Solutions for WordPress | 2024

BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More

4 weeks ago

WordPress Cron + WP-CLI + Ntfy

THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More

2 months ago

2024 is here and now :)

2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More

4 months ago

2023 ends and whats next !

Short look back at 2023 This has been a busy and interesting year. I am… Read More

4 months ago

cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More

5 months ago

Archaeology Travel Booth – Travel Innovation Summit 2023

Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More

6 months ago