Youtube-embed-helper NPM

Youtube Embed Helper

It tries to provide a better user experience with YouTube Player API for iframe Embeds.

Browser Support

Tested on IE11 but it should work on IE10 too.

File Sizes

JS: 3.12kb / 1.45kb GZip
CSS: 1.29kb / 0.41kb GZip

Installation

With npm

npm i youtube-embed-helper -S

You can download the latest version or checkout all the releases here.

Usage

Browser

You can import this plugin into your project as follows:

<link href="node_modules/dist/css/youtube-embed-helper.css" rel="stylesheet">
<script src="node_modules/dist/js/youtube-embed-helper.js" async defer></script>

.. and you're ready to go.

Webpack

If you want to import the plugin with your webpack build you can do it by:

import "youtube-embed-helper";

and for styles in js:

import "youtube-embed-helper/src/scss/youtube-embed-helper.scss";

and for styles in scss:

@import "~youtube-embed-helper/src/scss/youtube-embed-helper";

Autoprefixer

You can change browser list in the package.json. Default settings are here:

{
    "browserslist": [
      ">0.01%"
    ]
}

Refresh

You can process new dynamic contents by calling in browser:

window.processYouTubeEmbedHelper();

or in Webpack:

import processYouTubeEmbedHelper from "youtube-embed-helper/src/js/utils/process";
processYouTubeEmbedHelper();

Only new ones will be processed.

Prefetch

If you want to prefetch an .o-youtube-embed element's iframe resource you can dispatch following event after initialization:

el.dispatchEvent(el.prefetchEvent);

This will set autoplay to 0 and fetch youtube iframe in background. This way your visitors could play videos on mobile with just one click, not two.

Examples

We could create .o-youtube-embed__video, .o-youtube-embed__play and .o-youtube-embed__iframe elements on the fly but why? If we create those directly in the html that would be more fast and configurable, right?

Also .c-play component class used for demo. You need to use your own icon class and styles. Also you can put your icon element(s) inside the .o-youtube-embed__play element.

Lean + Automatic thumbnail from YouTube

<div class="o-youtube-embed" data-url="https://www.youtube.com/watch?v=w77zPAtVTuI" data-thumbnail="maxresdefault">
  <div class="o-youtube-embed__video">
    <div class="c-play o-youtube-embed__play"></div>
    <div class="o-youtube-embed__iframe"></div>
  </div>
</div>

Static caption + Manual thumbnail from YouTube

In this way Javascript don't touch the background-image.

<div class="o-youtube-embed" data-url="https://www.youtube.com/watch?v=sMK-BKUYM0s">
  <div class="o-youtube-embed__video" style="background-image: url(https://i.ytimg.com/vi/sMK-BKUYM0s/hqdefault.jpg);">
    <div class="c-play o-youtube-embed__play"></div>
    <div class="o-youtube-embed__iframe"></div>
  </div>
  <div class="o-youtube-embed__caption">
    <a class="o-youtube-embed__title" href="https://www.youtube.com/channel/UCWB20EVmTrCLegr64R9jEJA" target="_blank">
      Spinach Time Lapse (40 Days)
    </a>
  </div>
</div>

Overlay caption + Custom thumbnail

<div class="o-youtube-embed" data-url="https://www.youtube.com/watch?v=bfi3iipTQo0">
  <div class="o-youtube-embed__video" style="background-image: url(https://i.picsum.photos/id/292/1600/900.jpg);">
    <div class="c-play o-youtube-embed__play"></div>
    <div class="o-youtube-embed__iframe"></div>
  </div>
  <div class="o-youtube-embed__caption o-youtube-embed__caption--overlay">
    <a class="o-youtube-embed__title" href="https://www.youtube.com/channel/UCWB20EVmTrCLegr64R9jEJA" target="_blank">
      Radish Time Lapse (68 days)
    </a>
  </div>
</div>

Muted so maybe it could play on mobile at first click

This example also shows us that to override player params via .o-youtube-embed__iframe object's data attributes.

<div class="o-youtube-embed" data-url="https://www.youtube.com/watch?v=smJmfgaQAR4">
  <div class="o-youtube-embed__video">
    <div class="c-play o-youtube-embed__play"></div>
    <div class="o-youtube-embed__iframe" data-mute="1"></div>
  </div>
  <div class="o-youtube-embed__caption o-youtube-embed__caption--overlay">
    <a class="o-youtube-embed__title" href="https://www.youtube.com/channel/UCWB20EVmTrCLegr64R9jEJA" target="_blank">
      Blooming Narcissus Time Lapse
    </a>
  </div>
</div>

Pauses Automatically

When you use multiple video instance at the same page and when you try to play another video, currently playing video pause itself automatically.

Summary

In short .o-youtube-embed-helper object will transform and produce your YouTube video with performance and support IE10+.

Development

Clone this repo, go to the project directory and install dependencies with

npm install

and rebuild dist folder with

npm run dev
npm run prod
npm run build # alias of prod

or watch changes

npm run watch

TODO

Add to the npm directory.
Add optional caption
Add demo for original YouTube play icon
Add custom events (consider this one)
Catch "Your browser does not currently recognize any of the video formats available." error on Firefox and implement it in to the code
Add optional ability to prefetch iframes when element is in viewport