angular-video-bg is an Angular.js YouTube video background player directive. It stresses simplicity and performance.
You can see a demo of the directive here: Angular YouTube Video Background
You can also install the package using Bower.
bower install angular-video-bg
Or add it to your bower.json file:
No dependencies (besides Angular) are required!
To use the library, include the JS file on your index page, then include the module in your app:
app = angular.module('myApp', ['angularVideoBg'])
The directive itself is simply called video-bg. The only required attribute is videoId, which should be a YouTube video ID.
There are a number of options that be configured inline with attributes. Here are a few:
Option --- Default --- Description
ratio --- 16/9 --- Aspect ratio for the supplied video.
loop --- true --- If set to false, video will not automatically replay when it reaches the end.
mute --- true --- If set to false, the video's sound will play.
mobile-image --- YT video thumb --- Background image to display if user is on phone or tablet (videos cannot autoplay on mobile devices), default is YouTube video thumbnail.
start --- null --- Video start time in seconds. If set, video will play from that point instead of beginning.
end --- null --- Video end time in seconds. If set, video will play until that point and stop (or loop).
content-z-index --- 99 --- If set, will replace the z-index of content within the directive.
allow-click-events --- false --- If set to true, users will be able to click video to pause/play it.
<video-bg video-id="video.id" ratio="4/3" loop="false" mute="false" start="30" content-z-index="500" allow-click-events="true"></video-bg>
Should work in Chrome, Firefox, Safari, Opera and IE 9+ but have only tested in Chrome, Firefox and Safari so far.
Contributions are welcome. Please be sure to document your changes.
- Fork it
- Create your feature branch (
git checkout -b my-new-feature)
- Commit your changes (
git commit -am 'Add some feature')
- Push to the branch (
git push origin my-new-feature)
- Create new Pull Request
If you create new unit test, you can run
grunt test to execute all of the unit tests. Try to write tests if you contribute.
Potential Features down the road
- Add support for HTML5 videos instead of just YouTube videos.
- Dynamically change video being played.
- Add support for YouTube playlists.