Skip to content

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

Notifications You must be signed in to change notification settings

ray-zyh/angular-lazytube

 
 

Repository files navigation

angular-lazytube

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.

Install

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.

Usage

A few ways to embed the Keyboard cat video.

Link

<a ob-lazytube href="http://www.youtube.com/watch?v=J---aiyznGQ">Keyboard cat</a>

Default iframe

<iframe ob-lazytube width="480" height="360" src="//www.youtube.com/embed/J---aiyznGQ" frameborder="0" allowfullscreen></iframe>

ID based

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

Player Configuration

Defaults

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="http://www.youtube.com/watch?v=J---aiyznGQ" rel="0">Keyboard cat</a>

Responsiveness

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="http://www.youtube.com/watch?v=J---aiyznGQ">Keyboard cat</a>

Custom placeholder image (instead of Youtube autogen. thumbnail)

Use your own placeholder image from your server.

<a ob-lazytube href="http://www.youtube.com/watch?v=J---aiyznGQ" ob-placeholder="images/myVideo.png">Keyboard cat</a>
<a ob-lazytube href="http://www.youtube.com/watch?v=J---aiyznGQ" ob-placeholder="{{data.myImageFile}}">Keyboard cat</a>

Building

$ gulp

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 56.8%
  • HTML 43.2%
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy