I was working on the website for my church when they asked me to make a change: Instead of sending the website visitors to YouTube to watch the sermons, why not have them all displayed at the website. That way folks will tend to stay at the site instead of heading off to the YouTube site.
Embedding a YouTube video on a web page is easy. And displaying all of the videos on a single page is not difficult. But, displaying thumbnails that will play in a single player at the top of the page is an even better idea. This is not a new concept but I wasn't able to locate any uncomplicated code anywhere on the internet. Therefore, the code found here is the result of my attempt to keep it simple. I must admit that it took some time to piece together the little snippets of code used in this example. And I must also thank the many authors out there who freely display the code that they have developed, making this application possible. The image to the left is a screen-shot of a page using this code. Click on it to test how it works.
There are two text windows below:
The top window contains code for the “main” page. It includes two iframes (One for the player and the other to contain the video images).
The lower window contains iframe source code which will display your YouTube thumbnails. When a visitor clicks on one of the thumbnails, that YouTube video plays in the upper frame.
Copy and paste both pages into the same folder. Also, you will need to go to your YouTube account, right-click on the thumbnail for that video, then, click on “Save Image As.” After uploading it to your server change the code in the lower frame to match the path to your images.