Introduction

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:
VidScro1.jpg
VidScro2.jpg
The popup window will be shown in the middle of the screen.
Step 1
First, we will use some images:
VidScro3.jpg
VidScro4.jpg
Then we will write the code:
  1. <div> Videos</div>
  2. <table width="330" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  3. <tr>
  4. <td>
  5. <a id="pvideo11" class="pvideo">
  6. <img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>
  7. <a id="pvideo12" class="pvideo">
  8. <img id="imgVideo1" src="Second Video.png" onclick="NewWindow('Bin Tere.html','win','500','350','no','center');return false" /></a>
  9. <a id="pvideo13" class="pvideo">
  10. <img id="imgVideo2" src="Third Video.png" onclick="NewWindow('I Love You.html','win','500','350','no','center');return false" /></a>
  11. <a id="pvideo14" class="pvideo">
  12. <img id="imgVideo3" src="Fourth Video.png" onclick="NewWindow('Oh Hum Dum.html','win','500','350','no','center');return false" /></a>
  13. <a id="pvideo15" class="pvideo">
  14. <img id="imgVideo4" src="Fifth Video.png" onclick="NewWindow('Lakshya.html','win','500','350','no','center');return false" /></a>
  15. </td>
  16. </tr>
  17. </table>
  18. </div>
  19. <script type='text/javascript'>//<![CDATA[
  21. (function () {
  23. var quotes = $(".pvideo");
  24. var quoteIndex = -1;
  26. function showNextQuote() {
  27. ++quoteIndex;
  28. quotes.eq(quoteIndex % quotes.length)
  29. .fadeIn(2000)
  30. .delay(2000)
  31. .fadeOut(2000, showNextQuote);
  32. }
  34. showNextQuote();
  36. })();
  37. //]]>
  39. </script>
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:
TeriMeri.html
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <table cellpadding="0" cellspacing="0">
  6. <tr>
  7. <td>
  8. <iframe id="i1" width="560" height="300px" src="http://www.youtube.com/embed/QqgJkkVaWk8"
  9. frameborder="0" allowfullscreen></iframe>
  10. </td>
  11. </tr>
  12. </table>
  13. </body>
  14. </html>
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:
VidScro5.jpg
Step 3
Now we will write the code in our Main (Video Scroller.html) page like this:
  1. <a id="pvideo11" class="pvideo">
  2. <img id="imgVideo" src="First Video.png" onclick="NewWindow('TeriMeri.html','win','500','350','no','center');return false" /></a>
  3. Now we will write the JavaScript Code Like this:
  4. <script language="javascript" type="text/javascript">
  5. $(function () { $("a.youtube").YouTubePopup().click(); });
  6. $.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' };
  8. var win = null;
  9. function NewWindow(mypage, myname, w, h, scroll, pos) {
  10. 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; }
  11. if (pos == "center") { LeftPosition = (screen.width) ? (screen.width - w) / 2 : 100; TopPosition = (screen.height) ? (screen.height - h) / 2 : 100; }
  12. else if ((pos != "center" && pos != "random") || pos == null) { LeftPosition = 0; TopPosition = 20 }
  13. settings = 'width=' + w + ',height=' + h + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
  14. win = window.open(mypage, myname, settings);
  15. }
  17. </script>
The output will be:
VidScro6.jpg