angular-laxytube | Lightweight, responsive, lazy loaded YouTube videos

LazyTube angular directivez


Stars : 10

Forks : 10

Created by Joel Arvidsson

bower install angular-lazytube

Demo Download GitHub


Lightweight, responsive, lazy loaded YouTube videos that degrades gracefully.

This AngularJS directive replaces any heavy iframes or links with a image preview that loads the player only on click. Useful when performance and page size is important or for sites with many embeded youtube videos.

For a simple example page with 10 videos, lazytube will reduce loadtime by 7x and memory usage by 2-3x.


With bower:

$ bower install angular-lazytube

With NPM:

$ npm install angular-lazytube

Don't forget to include angular and add oblador.lazytube to your module dependencies.


A few ways to embed the Keyboard cat video.


<a ob-lazytube href="">Keyboard cat</a>

Default iframe

<iframe ob-lazytube width="480" height="360" src="//" frameborder="0" allowfullscreen></iframe>

ID based

<div ob-lazytube="J---aiyznGQ">Keyboard cat</div>

Player Configuration


Any default options sent to YouTube can be changed by modifying the obYoutubeConfig. Read more about which parameters you can use with the player.

angular.module('myApp', ['oblador.lazytube']).
  run(function(obLazytubeConfig) {
    //Change default player size
    obLazytubeConfig.width = 800;
    obLazytubeConfig.height = 600;

    //Disable related videos
    obLazytubeConfig.urlParams.rel = 0;

    //Disable responsive player
    obLazytubeConfig.responsive = false;

Per instance

To acheive the same thing but to only a specific player, just add the parameters as attributes.

<a ob-lazytube href="" rel="0">Keyboard cat</a>


Placeholders and the player is responsive by default. Don't forget to add width and height arguments if the aspect ratio is not 16:9.

To disable the responsiveness either add the no-responsive attribute or change the defaults as outlined above.

<a ob-lazytube no-responsive href="">Keyboard cat</a>

Custom placeholder image (instead of Youtube autogen. thumbnail)

Use your own placeholder image from your server.

<a ob-lazytube href="" ob-placeholder="images/myVideo.png">Keyboard cat</a>
<a ob-lazytube href="" ob-placeholder="{{data.myImageFile}}">Keyboard cat</a>


$ gulp


Javascript plugin