How to Scroll Video using JQuery in 9 steps


In the following post I’m going to show you how you can use the YouTube API and a little JQuery to recreate the scrolling video effect seen on http://www.agirlstory.org

You can see the demo I have created here: http://bit.ly/9hYU0N

For this demo I’m going to set up 2 videos and scroll between to two of them, but you can use this concept to scroll as many videos as you like.

Step 1

Add the reference to the YouTube API code that's hosted by our good friends at Google.

1 <script src="http://www.google.com/jsapi" type="text/javascript"></script> 2 <script type="text/javascript"> 3 google.load("swfobject", "2.1"); 4 </script>

Step 2

Add a reference to the JQuery Library, I’ve added the version hosted by Microsoft

1 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" 2 language="javascript" type="text/javascript"></script>

Step 3

Create some HTML layers where we can load the videos into later. I have named the video elements uniquely so that I can reference them later. I have also wrapped them in a containing Div layer so that I can scroll them them easily and using the JQuery animation function.

1 <div id="videoContainer"> 2 <div id="video1"></div> 3 <div id="video2"></div> 4 </div>

Step 4

Create a function called loadVideoPlayers that will Load the video files into objects in HTML objects that we created in Step 3

1 function loadVideoPlayers() { 2 // The videoID of the video to load from youtube. You can generally find this in the URL 3 // when you are watching a video on youtube 4 var videoID = "UO5v38cZ9cw" 5 // Because the SWF is calling JavaScript Cross Domain you will need to set this 6 // otherwise it won't have permission to raise events like onYouTubePlayerReady 7 var params = { allowScriptAccess: "always" }; 8 // This is the Id that the Object will have when created in the DOM 9 // we will use this to obtain a reference to the object later using $("#player1").get(0); 10 var atts = { id: "player1" }; 11 // We can then Embed using googles swfobject 12 swfobject.embedSWF("https://www.youtube.com/v/" + videoID + 13 "&enablejsapi=1&playerapiid=player1", 14 "video1", "480", "295", "8", null, null, params, atts); 15 16 // Now do it all again with a different player 17 var videoID2 = "g3kHe8wlGh4" 18 var params = { allowScriptAccess: "always" }; 19 var atts = { id: "player2" }; 20 swfobject.embedSWF("https://www.youtube.com/v/" + videoID2 + 21 "&enablejsapi=1&playerapiid=player2", 22 "video2", "480", "295", "8", null, null, params, atts); 23 }

Step 5

When the page loads we will need to call loadVideoPlayers you can use JQuery to do this easily:

1 $(document).ready(function () { 2 loadVideoPlayers(); 3 });

Step 6

When the video player is loaded and ready to roll the SWF object will call a specific function on your page that must be called onYouTubePlayerReady. I use this function to create an object reference and then call either UpdatePlayerInfo or UpdatePlayerInfo2.

1 // This function is automatically called by the player once it loads 2 function onYouTubePlayerReady(playerId) { 3 // The player ID comes from the "playerapiid" parameter that was set 4 // when the embedded player was loaded 5 if (playerId == "player1") { 6 objVideo1 = $("#player1").get(0); 7 updatePlayerInfo(); 8 } 9 else if (playerId == "player2") { 10 objVideo2 = $("#player2").get(0); 11 updatePlayerInfo2(); 12 } 13 }

Step 7

The two updatePlayer nfo functions are called when the Video is ready to play and then every 250 milliseconds. These functions are where all your logic for controlling the video should go. In my simple example I have said that if the Players current position is greater than x seconds pause the current video and move on to the next one. I then scroll the Video using either the scrollToVideo1 or scrollToVideo2 functions.

 

1 // Display information about the current state of the player 2 function updatePlayerInfo() { 3 if (objVideo1 && objVideo1.getPlayerState() == 1 && objVideo1.getDuration) { 4 if (objVideo1.getCurrentTime() > 5) { 5 objVideo1.pauseVideo(); 6 objVideo1.seekTo(0, true); 7 objVideo2.seekTo(6, true); 8 objVideo2.playVideo(); 9 scrollToVideo2() 10 } 11 } 12 setTimeout(updatePlayerInfo, 250); 13 } 14 15 // Display information about the current state of the player 16 function updatePlayerInfo2() { 17 if (objVideo2 && objVideo2.getPlayerState() == 1 && objVideo2.getDuration) { 18 if (objVideo2.getCurrentTime() >= 13) { 19 objVideo2.seekTo(6, true); 20 objVideo2.pauseVideo(); 21 objVideo1.playVideo(); 22 scrollToVideo1() 23 } 24 } 25 setTimeout(updatePlayerInfo2, 250); 26 }

 

Step 8

Set up some CSS. I set up some base CSS just to give the body a little margin and to set up the video container so that it can be animated using the JQuery animate library.

1 <style> 2 body 3 { 4 padding: 40px; 5 } 6 #videoContainer 7 { 8 position: relative; 9 left: 0px; 10 top: 0px; 11 width: 1000px; 12 height: 295px; 13 overflow: hidden; 14 } 15 </style>

Step 9

Add the two scroll method. These were referenced earlier and are used o to animate the Video Container. I’ve used the JQuery animation because it’s so simple to use. You can find out more about it here: http://api.jquery.com/animate/ 

1 function scrollToVideo1() { 2 $("#videoContainer").animate({ 3 left: '0' 4 }, 1000); 5 } 6 7 function scrollToVideo2() { 8 $("#videoContainer").animate({ 9 left: '-480' 10 }, 1000); 11 }

I hope these steps explain how to combine YouTube and JQuery to create a really interesting effect. If you try this out for yourself let me know how you get on.

Comments (0)

Skip to main content