Progressive Enhancement Vimeo Video Player - jQuery vimeoplayer.js

File Size: 19.1 KB
Views Total: 844
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Progressive Enhancement Vimeo Video Player - jQuery vimeoplayer.js

A fast, progressive enhancement jQuery vimeo video player plugin that parses and converts the Vimeo link within the document into an iframe embbed Vimeo video player.

See also:

How to use it:

1. Load the main JavaScript file vimeoplayer.js after you've loaded the latest jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="vimeoplayer.js"></script>

2. Add the Vimeo link & video poster image to the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="vimeoplayer.js"></script>

3. That's it. You can pass the following parameters to the Vimeo video player via data-PARAMETER attributes.

  • url (required): The Vimeo URL
  • width: the width of the video
  • maxwidth: the max width of the video
  • height: the height of the video
  • maxheight: the max height of the video
  • byline: show the byline on the video
  • title: show the title on the video
  • portrait: show the user’s portrait on the video
  • color: the color of the video controls
  • autoplay: autoplay on video load
  • loop: infinite loop
  • autopause: auto pause when another one plays
  • xhtml: make the embed code XHTML compliant
  • api: enable the JavaScript API
  • player_id: unique id for the player
  • callback: callback function
<a href="https://vimeo.com/132793529" data-vimeo data-vimeo-loop data-vimeo-autoplay>
  <img src="http://posterfra.me/https://vimeo.com/132793529" alt="Yoga for Mountain Bikers" />
</a>

This awesome jQuery plugin is developed by thisislawatts. For more Advanced Usages, please check the demo page or visit the official website.