Play Background Youtube Video with Jquery Tubular

jQuery
Aug 18 2015
1873 Views

Play Background Youtube Video with Jquery Tubular

Download at github

Introduction:

Tubular is a jQuery plugin used to play Youtube video in your page background. Just attach it to your page wrapper element.

Step1:

Create simple html page, and add wrapper id in main DIV tag.

<!DOCTYPE html>

<html>

    <head>

            <title> Play Background Youtube Video With Jquery Tubular </title>

            </head>

            <body>                       

<div id="wrapper"></div>

            </body>

</html>

Step2:

Now attach jquery min file and jquery tubular plugin in header of html page.

<script src= "js/jquery.min.js" ></script>

<script src="js/jquery.tubular.1.0.js"></script>

Step3:

Call the plugin as bellow

<script type="text/javascript">

            $(document).ready(function() {

                var opti>

                                    videoId: 'AFbBgtWHPks',

                                    start: 3,

                                    mute : false,

                                    playButtonClass: 'play',

                                    pauseButtonClass: 'pause',

                                    muteButtonClass: 'mute',

                                    volumeUpClass: 'vol-up',

                                    volumeDownClass: 'vol-down',

                                    increaseVolumeBy: 5

                        };

                $('#container').tubular(options);

            });

</script>

Conclusion:

You can download library file and demo files at Github account.

Leave a Reply