A Simple Video Scroller In JavaScript

In this article, we will discuss how to create a Video Scroller using JavaScript. The output will be:


Step 1

First we take some images and screen shots of the videos so when we click on an image, we can watch the video:



Step 2

Here we use an <iframe> tag to embed our video like this:

<iframe id="i1" width="260" height="215" src="http://www.youtube.com/embed/QqgJkkVaWk8" frameborder="0" allowfullscreen></iframe>

Here we specify the source of the video so the output will be:



Step 3

Now we create the Video Scroller, for the Video Scroller we will use the <marquee> tag like this:

<marquee behavior="alternate" scrollamount="2" style="width:260px;" >
</marquee>

It will rotate the scroller in both directions. Now we will add the images to it:

<marquee behavior="alternate" scrollamount="2" style="width:260px;" >
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Bin Tere.png" width="60" height="45" onclick="changeSource()" onmouseover="this.style.opacity='0.6';this.style.border='2px solid black'" onmouseout="this.style.opacity='1';this.style.border='2px
solid #E8F0F1';" />
&nbsp;
</td>
 
<td>
<img src="I Love You.png" width="60" height="45" onclick="changeSource1()" onmouseover="this.style.opacity='0.6';this.style.border='2px solid black'" onmouseout="this.style.opacity='1';this.style.border='2px
solid #E8F0F1';" />&nbsp;
</td>
<td>
<img src="Oh Hum Dum.png" width="60" height="45" onclick="changeSource2()" onmouseover="this.style.opacity='0.6';this.style.border='2px solid black'" onmouseout="this.style.opacity='1';this.style.border='2px
solid #E8F0F1';" />&nbsp;
</td>
<td>
<img src="Teri Meri.png" width="60" height="45" onclick="changeSource3()" onmouseover="this.style.opacity='0.6';this.style.border='2px solid black'" onmouseout="this.style.opacity='1';this.style.border='2px
solid #E8F0F1';" />&nbsp;
</td>
<td>
<img src="Lakshya.png" width="60" height="45" onclick="changeSource4()" onmouseover="this.style.opacity='0.6';this.style.border='2px solid black'" onmouseout="this.style.opacity='1';this.style.border='2px
solid #E8F0F1';" />
</td>
</tr>
</table>
</marquee>

So the output will be:



Here we set the Opacity on the onmouseover and onmouse events, now we will discuss that when we click on the image the video will be shown. For that we will write the following JavaScript function on the onclick event of the images like this:

<script language="javascript">

    function changeSource() {

        document.getElementById('i1').src = "http://www.youtube.com/embed/MI-0wy_qai0";

    }

    function changeSource1() {

        document.getElementById('i1').src = "http://www.youtube.com/embed/TEk_KpLaRag";

    }

    function changeSource2() {

        document.getElementById('i1').src = "http://www.youtube.com/embed/9Wb9AZ4YioM";

    }

    function changeSource3() {

        document.getElementById('i1').src = "http://www.youtube.com/embed/QqgJkkVaWk8";

    }

    function changeSource4() {

        document.getElementById('i1').src = "http://www.youtube.com/embed/9Wb9AZ4YioM";

    }

</script>

So when we click on the first image the output will be: