jVid: a jQuery plugin to embed videos with style
JournaljVid 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