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>
    )
  }
}

21 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
  5. Thank you very much for this useful article. I like it. Terror

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Wow, thanks for the tutorial! I'd can't do it by myself. I'm so bad at html\css. I don't know how this code can be easy for someone. I always used to purchase help with my html works. But before doing it I was always reading areview of BestCustomWriting.com or some other service.

    ReplyDelete
  8. Good to know your writing.

    ReplyDelete
  9. It is really a great step to create a library. If you have reading habits then it will be too good for you and even if you don't have that habit,still it is good. explore more to see the sample of quality writing services.

    ReplyDelete
  10. Web development is a specialized field which is not possible for everyone to do. So better outsource for this part and especially in ukraine you must outsource web development ukraine . Because cost of wages is high.

    ReplyDelete
  11. Is gaming your favorite hobby? Is a video game a favorite app on your phone for those long bus or train commutes? Do you visit online RPGs to network with associates? Are you looking to improve your gaming know-how? Then continue reading for more! Here are some great tips to help you get started. https://hacksmista.com/

    ReplyDelete
  12. If you are a parent of a child who enjoys playing video games, be aware of multi-player and online gaming options. These features allow your child to interact with other players throughout the world. As nice as it is for your child to be able to interact with others, you have no idea who the person on the other end is.
    Recover My Files V6.2.2.2539 Crack
    Parallels Desktop 13.3

    ReplyDelete
  13. Thank you very much for this useful article. I like it.
    https://blowingquotes.com/

    ReplyDelete
  14. Blowing Quotes is a Collection of Famous Quotes, Saying, Hadiths, World History, Hope Quote, Islamic Quote, Lesson Quote, Life and happiness Quotes, Life Quote, Motivational Quote, women's freedom, Woman's Rights, Islamic History, Qur’anic Ayat and Surah.
    https://blowingquotes.com/2019/07/07/about-the-creation-of-universe/

    ReplyDelete
  15. Will this able to work as how YouTube has updated and become so good.
    custom logo design company

    ReplyDelete
  16. Hello! .order viagra internet , order cialis , tadalafil , buy cheap viagra , , https://www.buyyoutubesubscribers.in

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. This post is truly inspiring. I like your post and everything you share with us is current and very informative
    love marriage specialist in pune

    ReplyDelete
  19. 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 profitkamrun seo

    ReplyDelete

Blogroll

Popular Posts