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

• [x] Add to the npm directory.
• [x] 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

Contributors

• Ömür Yanıkoğlu @hayatbiralem

Contributing

In lieu of a formal style guide, take care to maintain the existing coding style.