jquery-youtube-background

    1.0.0 • Public • Published

    jQuery.BackgroundVideo V1.0.5

    Inspired by Tubular

    Example: http://rochestb.github.io/jQuery.YoutubeBackground 360 Video Example: http://rochestb.github.io/jQuery.YoutubeBackground/360.html

    Production Example: www.cpbgroup.com

    jQuery plugin that lets you create background videos using youtube api

    Put the script at the bottom of your markup right after jQuery:

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="src/jquery.youtubebackground.js"></script> 
    <div id="video"></div>

    Call the plugin function and your carousel is ready.

    $('#video').YTPlayer({
        fitToBackground: true,
        videoId: 'LSmgKRx5pBo'
    });

    Need to customize some CSS in order to make it a background

    #video{
     position: relative;
     background: transparent;
    }
     
    .ytplayer-container{
     position: absolute;
     top: 0;
     z-index: -1;
    }

    Works with Youtube Javascript API

    Youtube Javascript API Options

    Any youtube option must be placed within the playerVars object.

    $('#video').YTPlayer({
        fitToBackground: true,
        videoId: 'LSmgKRx5pBo'
        playerVars: {
          modestbranding: 0,
          autoplay: 1,
          controls: 1,
          showinfo: 0,
          branding: 0,
          rel: 0,
          autohide: 0,
          start: 59
        }
    });
    

    Access all of YouTube's API events and methods by using player:

    var player = $('#background-video').data('ytPlayer').player;
    player.pauseVideo();
    player.playVideo();
    
    player.addEventListener('onStateChange', function(data){
      console.log("Player State Change", data);
    });
    
    

    Options

    For more details visit our Documentations Page

    Install with Bower

    bower install youtube-background-video
    

    Documentation

    Documentations Page

    Contributing

    I welcome contributors, bugs, and questions.

    Bug reports

    A bug is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!

    Guidelines for bug reports:

    1. Use the GitHub issue search — check if the issue has already been reported.

    2. Check if the issue has been fixed — try to reproduce it using the latest develop branch in the repository.

    3. Isolate the problem — ideally create a reduced test case and a live example. This JSFiddle is a helpful template you can fork.

    By submitting a patch, you agree to allow the project owner to license your work under the terms of the MIT License.

    License

    The code and the documentation are released under the MIT License.

    Install

    npm i jquery-youtube-background

    DownloadsWeekly Downloads

    53

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar