Mat

jVid: a jQuery plugin to embed videos with style

Journal

jVid is a jQuery plugin I developed to help customise the look of YouTube and Vimeo videos when embedded within a website.

jVid is a jQuery plugin I developed to help customise the look of YouTube and Vimeo videos when embedded within a website.

I say videos, and not video players, because the plugin simply displays a custom poster for the video, with a few options to control CSS animations, colors, shapes and a video caption.

Once clicked, the poster will fade out and the chosen video will begin to play.

To use the plugin, the HTML markup is a simple empty div tag with a mandatory data-video attribute. This currently supports either a YouTube or Vimeo video ID, found in the URL of the chosen video's page.

If you would also like to display a caption for the video, include the second data attribute data-title.

To run the example seen above, the HTML markup follows these rules and the JavaScript is as follows:

$.jVid({
  anim: 'arrowScale bgScale fade',
  bgColor: '#45bbff',
  bgShape: 'rounded-square',
  borderColor: 'none'
})

If you'd like to use multiple poster styles on the same page, add a class to each div element to target them in JavaScript with $('.divClass').jVid(), rather than the global $.jVid()

Download: http://github.com/matswainson/jvid

Other posts