Video Scroller in JavaScript

Here we show a simple example of a Video Scroller in JavaScript. Here we use images to be scrolled using jQuery fadeIn() and fadeOut() functions and the video will be shown in a PopUp window like this:



The popup window will be shown in the middle of the screen.

Step 1

First we will use some images:



Then we will write the code:



        <table width="330" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">



                    <a id="pvideo11" class="pvideo">

                        <img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>

                    <a id="pvideo12" class="pvideo">

                        <img id="imgVideo1" src="Second Video.png" onclick="NewWindow('Bin Tere.html','win','500','350','no','center');return false" /></a>

                    <a id="pvideo13" class="pvideo">

                        <img id="imgVideo2" src="Third Video.png" onclick="NewWindow('I Love You.html','win','500','350','no','center');return false" /></a>

                    <a id="pvideo14" class="pvideo">

                        <img id="imgVideo3" src="Fourth Video.png" onclick="NewWindow('Oh Hum Dum.html','win','500','350','no','center');return false" /></a>

                    <a id="pvideo15" class="pvideo">

                        <img id="imgVideo4" src="Fifth Video.png" onclick="NewWindow('Lakshya.html','win','500','350','no','center');return false" /></a>





        <script type='text/javascript'>//<![CDATA[


            (function () {


                var quotes = $(".pvideo");

                var quoteIndex = -1;


                function showNextQuote() {


                    quotes.eq(quoteIndex % quotes.length)



.fadeOut(2000, showNextQuote);









Step 2

Now we create various HTML pages to show the window in the PopUp Window (in this article, I will discuss only one HTML page coding); see:






            <table cellpadding="0" cellspacing="0">



                        <iframe id="i1" width="560" height="300px" src=""

                            frameborder="0" allowfullscreen></iframe>






Here we will use the <iframe> tag to show the video and set the source of the video here. So when we run this page the output will be:


Step 3

Now we will write the code in our Main (Video Scroller.html) page like this:

        <a id="pvideo11" class="pvideo">

            <img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>

        Now we will write the JavaScript Code Like this:

        <script language="javascript" type="text/javascript">

            $(function () { $("").YouTubePopup().click(); });

            $.fn.YouTubePopup.defaults = { 'youtubeId': '', 'title': '', 'idAttribute': 'rel', 'draggable': false, 'modal': true, 'width': 640, 'height': 480, 'hideTitleBar': false, 'clickOutsideClose': true, 'overlayOpacity': 0.5, 'autohide': 2, 'autoplay': 1, 'color': 'red', 'color1': 'FFFFFF', 'color2': 'FFFFFF', 'controls': 1, 'fullscreen': 1, 'loop': 0, 'hd': 1, 'showinfo': 0, 'theme': 'light' };


            var win = null;

            function NewWindow(mypage, myname, w, h, scroll, pos) {

                if (pos == "random") { LeftPosition = (screen.width) ? Math.floor(Math.random() * (screen.width - w)) : 100; TopPosition = (screen.height) ? Math.floor(Math.random() * ((screen.height - h) - 75)) : 100; }

                if (pos == "center") { LeftPosition = (screen.width) ? (screen.width - w) / 2 : 100; TopPosition = (screen.height) ? (screen.height - h) / 2 : 100; }

                else if ((pos != "center" && pos != "random") || pos == null) { LeftPosition = 0; TopPosition = 20 }

                settings = 'width=' + w + ',height=' + h + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';

                win =, myname, settings);




The output will be:



Up Next
    Ebook Download
    View all
    View all