A lightweight, mobile-friendly, performance-oriented alternative to embed YouTube videos.

Embed YouTube videos without the performance hit from all those Iframes. TubeFu.js makes smart, pagespeed-optimized video embedding completely automatic. TubeFu.js also automagically makes your embedded videos completely fluid & responsive...no more fighting those YouTube Iframes that overflow their containers. If you're using YouTube videos on your site, give TubeFu.js a shot...you'll be shocked at the performance boost, especially on mobile devices!

To use TubeFu.js, you'll need a modern JavaScript workflow and build system with ES6 module bundling and transpiling capabilities. Here's a great example.

Install TubeFu.js via NPM and add to your dependencies:

$ npm install tube-fu.js --save

Import the TubeFu.js module, then instantiate it. The constructor takes several optional arguments, but you should find the defaults work great for everything but edge cases.

// import TubeFu.js
import TubeFu from 'tube-fu.js'

// create an instance
const Tube = new TubeFu()

You're only one step away from lightning-fast embedded videos. You'll need to make a simple edit to the standard YouTube embed code in your HTML. Simply change the YouTube element's tag type from 'iframe' to 'div' and add the class 'tube-fu', like so:

// change the standard YouTube embed code from this:
<iframe width="420" height="315" src="https://www.youtube.com/embed/notKtAgfwDA" frameborder="0" allowfullscreen></iframe>

// to this
<div class="tube-fu" width="420" height="315" src="https://www.youtube.com/embed/notKtAgfwDA" frameborder="0" allowfullscreen></div>

That's it, you're now equipped with a lightning-fast, completely responsive, bandwidth-sipping video embedding system. Please note that you may encounter issues if you have any additional options or query-strings referenced in the YouTube element's URL. Just stick with the standard copy/paste YouTube embed code, TubeFu.js can take care of optional stuff for you at the constructor.

To change the embedded video element selector from the default 'tube-fu', pass a selector or element to the constructor as the first argument:

// Pass a selector
const Tube = new TubeFu({
  selector: '.css-selector',
  // options...
})

// Or element
const videoEl = document.querySelector('.sweet-vid');
const Tube = new TubeFu({
  selector: videoEl,
  // options...
})

Note that each embedded video on your page needs to have its own TubeFu.js instance, so make sure that you pass a unique selector or element to the constructor; not a NodeList. If you have several videos with a common selector, you can iterate through the videos to create individual TubeFu.js instances:

const videos = document.querySelectorAll('.video-class');

for (let i = 0; i < videos.length; ++i) {
  new TubeFu({
    selector: videos[i],
    // options...
  })
}

TubeFu.js was designed to "just work" with its default options, so no options are required. If you need to tweak the way that TubeFu.js does its thing, read on!

Here is each available option, along with their defaults:

new TubeFu({
  selector: '.tube-fu',
  injectStyles: true, /* use false to completely disable automatic CSS injection */
  iframeClass: '.tube-fu-active', /* the class applied to the active video and thumbnails */
  playButtonClass: '.tube-fu-play-button', /* initial class of the play button */
  ytModestbranding: 1, /* youtube's "modest branding" option, accepts 1 or 0 */
  ytShowinfo: 0, /* youtube's "show info" option, accepts 1 or 0 */
  ytControls: 0, /* youtube's "show controls" option, accepts 1 or 0 */
  ytVq: 'hd720' /* youtube's "vq" option, accepts a youtube video quality parameter */
});

MIT. © 2016 Donny West