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

Angular Core Dependency: ^1.2.16

Module License: MIT

Added by: Sam Deering





Stars: 45

Watchers: 45

Forks: 10

Module Description


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>


$ gulp

Module stats last updated: 2018-01-03 16:00:04

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!