So I’ve been trying to find a clean way to put a collection of Brian Regan videos on my fan site at allregan.com. I wasn’t able to find a satisfactory way online, so I had to get dirty and just figure out the javascript for myself. Let me give you the background and then the solution.

Background
I wanted to be able to play a bunch of videos on the same page, but without using 25 different windows (individual embedded videos). These get really long and make it hard to navigate the site. So, it was like this:

Texttexttexttexttexttexttexttexttexttexttexttext….

Text

Text

Text

etc…

I wanted this:

Video 1 (this is a link that will change the single, larger player)
Text text text

Video 2
Text text text

etc…

Solution
I used javascript’s innerHTML property to fill in where I wanted the single player to be. I then made a function that would replace that coding with a variable I fed it (the unique video name of each video I wanted to embed). It would swap them out and the video auto-plays to make it a smooth looking transition. The function also jumps the viewer back up to where the video is playing so they don’t have to quickly scroll up or miss the beginning. It was a pretty simple solution, but I hadn’t seen anywhere to rip it off of online, so I had to make it myself. And I’m pretty dern happy with it. For the actual code, you can check out the Brian Regan Videos page on my site. Then just right mouse click and hit ‘view source.’ Yep. Pretty proud of it.

So I’ve been trying to find a clean way to put a collection of Brian Regan videos on my fan site at allregan.com. I wasn’t able to find a satisfactory way online, so I had to get dirty and just figure out the javascript for myself. Let me give you the background and then the solution.

Background
I wanted to be able to play a bunch of videos on the same page, but without using 25 different windows (individual embedded videos). These get really long and make it hard to navigate the site. So, it was like this:

Texttexttexttexttexttexttexttexttexttexttexttext….

Text

Text

Text

etc…

I wanted this:

Video 1 (this is a link that will change the single, larger player)
Text text text

Video 2
Text text text

etc…

Solution
I used javascript’s innerHTML property to fill in where I wanted the single player to be. I then made a function that would replace that coding with a variable I fed it (the unique video name of each video I wanted to embed). It would swap them out and the video auto-plays to make it a smooth looking transition. The function also jumps the viewer back up to where the video is playing so they don’t have to quickly scroll up or miss the beginning. It was a pretty simple solution, but I hadn’t seen anywhere to rip it off of online, so I had to make it myself. And I’m pretty dern happy with it. For the actual code, you can check out the Brian Regan Videos page on my site. Then just right mouse click and hit ‘view source.’ Yep. Pretty proud of it.