Showing posts with label angular youtube. Show all posts
Showing posts with label angular youtube. Show all posts
Youtube videos with custom configurable controls for Angular.js

Youtube videos with custom configurable controls for Angular.js

May 17, 2017

WARNING: This project is being continued as https://github.com/acamica/rx-player

Check out the demo and documentation here

Install


Download via bower or look for the files in the dist folder
 $ bower install --save hr-angular-youtube  
Import it to your page
 <script src="bower_components/hr-angular-youtube/dist/hr-angular-youtube.min.js"></script>  
Enable it on your app
 angular.module('myModule', ['hrAngularYoutube']);  

Use it


As you can see in the Basic Example, the youtube-player directive only requires a video-id.
 <youtube-player video-id="'i_mKY2CQ9Kk'"></youtube-player>  
Note that the id is a literal in this case, but you can bind the video to a scope variable

More examples


  • In the Controls Example you can see how to control the video with externals controls.
  • In the Overlay Example you can see how to create custom controls.
  • In the Marker Example you can see how to add different video markers to the video.

Features


  • Create custom controls or overlay items easily
  • Configure all your videos options via attributes or the factory configuration
  • Set width or height and adjust the oposite dimension with the aspect ratio of the video

TODO


Create a configure example that shows how to set the options of this page https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 using either the provider or the directive attributes.

Note: Special thanks to Hernan Rajchert

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.