By including this component, you can make youtube video as HTML page background. This is created based jquery-tubular plugin. Lets see how to use this library.

Using npm

npm install react-tubular --save

Import Tubular component

import Tubular from 'react-tubular';

Usage

Here you can pass ration, youtube video id, mute, repeat, width, z-index of the wrapper, volume increase or decrease range, video starting point.
<Tubular
    ratio = {16/9} // usually either 4/3 or 16/9 -- tweak as needed
    videoId = {'ZCAnLxRvNNc'} // toy robot in space is a good default, no?
    mute = {true}
    repeat = {true}
    width = {window.innerWidth}
    wrapperZIndex = { -1 }
    increaseVolumeBy = { 10 }
    start = { 0 }
    ref={(ref)=>{this.tubular = ref}}/>

Functions

Tubular component provides some functions, which we can call by using ref. Observe below example which calls playVideo, pauseVideo, mute, decreaseVolume, increaseVolume functions
import React from 'react';
import Tubular from 'react-tubular';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.playVideo = this.playVideo.bind(this);
    this.pauseVideo = this.pauseVideo.bind(this);
    this.mute = this.mute.bind(this);
    this.decreaseVolume = this.decreaseVolume.bind(this);
    this.increaseVolume = this.increaseVolume.bind(this);
  }

  playVideo() {
    this.tubular.playVideo();
  }

  pauseVideo() {
    this.tubular.pauseVideo();
  }

  mute() {
    this.tubular.mute();
  }

  decreaseVolume() {
    this.tubular.decreaseVolume();
  }

  increaseVolume() {
    this.tubular.increaseVolume();
  }

  render() {
    return (
      <div>
        <h1>It Works </h1>
        <p>This React project just works with react-tubular</p>
        <h2>Actions</h2>

        <button onClick={this.playVideo}>Play video</button>
        <button onClick={this.pauseVideo}>Pause video</button>
        <button onClick={this.mute}>Mute video</button>
        <button onClick={this.decreaseVolume}>Decrease Volume</button>
        <button onClick={this.increaseVolume}>Increase Volume</button>

        <Tubular
            ratio = {16/9} // usually either 4/3 or 16/9 -- tweak as needed
            videoId = {'ZCAnLxRvNNc'} // toy robot in space is a good default, no?
            mute = {true}
            repeat = {true}
            width = {window.innerWidth}
            wrapperZIndex = { -1 }
            increaseVolumeBy = { 10 }
            start = { 0 }
            ref={(ref)=>{this.tubular = ref}}/>

      </div>
    )
  }
}

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. The secret is in how the video background is converted from its original format into one that will work seamlessly with PowerPoint. Also a required plugin is needed so that the PowerPoint user can add text and/or graphics over the looping video background. click here

    ReplyDelete
  3. Fun stuff. I get tons of errors in the console from embeded youtube apis being blocked or missed when using this component. Some crap from doubleclick ad servers too.

    ReplyDelete
  4. Social networking sites have brought incredible changes to the world. They changed the way people communicate with one another, the approach of businesses to gain profit, and to express one's thoughts and emotions. viewgrip.net

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts