YouTube playlist embed question

**mlegg** · 11-05-2011, 12:03 AM

On this page I want to embed a YouTube player with a playlist of all the videos for the site. http://www.pscompetitiveedge.com/videos.html

If you click on the button that is highlighted red (on the bottom to the far right next to the YouTube logo) it pops up the videos on your playlist with left and right scroll bars to view more.

What I would like to do is really have the one main player and below have thumbnail versions of the other videos. So when you click one of the thumbnails that the video loads in the YouTube Player.

The reason I chose YouTube is so that these videos are seen on any browser and system, including tablets and smart phones. The orginal web guy for this site had only Flash videos, and the owner didn't like that he wasn't able to see his site on his iPad.

The player is in an iframe (from the embed code on YouTube). Are there any extra parameters to add to do what I am asking?

Code:

<iframe src="http://www.youtube.com/embed/videoseries?list=PLC2A07613BF0ACEAA&amp;hl=en_US&amp;version=3" allowfullscreen="" frameborder="0" height="437" width="800"></iframe>

**molendijk** · 11-05-2011, 05:05 PM

Do you want to activate the videos by clicking on one of the thumbnails that appear when you click on the highlighted button?
Or do you simpy want to activate a given video by clicking on a link (= a thumbnail) that has been put anywhere on the screen?
In the first case, you'll have to create very large playlists.
In the second case, you'll have to create a javascript function doing the job. Here's an example (without thumbnails, but the text-links could be replaced with thumbnail-links).
Arie Molendijk.
===

**mlegg** · 11-05-2011, 06:23 PM

I would like it so that under the main YouTube player would be a scrolling images list with the small videos rather than the list being on the player. See Photoshopped image below.

**molendijk** · 11-05-2011, 08:22 PM

Experiment with this (replace the text-links with your thumbnail-links):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
</head>

<body style="font-family: verdana; font-size:12px" onload="document.getElementById('smooth_transition').style.display='none'">

<div style="position: relative; margin-left: 8%; text-align: center"></div>

<!-- VIDEO CONTAINER. Just an example of loading / replacing videos without flicker in IE. Document.write the iframes if you want validation for a strict doctype  -->
<div id="video" style="position: absolute; left:45px; top: 40px; right: 45px; bottom: 70px; border:1px solid black">
<iframe name="my_music" src="http://www.youtube.com/embed/JkQS1MIplKI?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1" style="position: absolute; width: 100%; height: 100%; background: black" frameborder="0"></iframe>

<!--[if IE]>
<iframe id="smooth_transition" src="http://www.youtube.com/apiplayer" style="position: absolute; width: 100%; height: 100%; overflow: hidden"></iframe>
<![endif]-->
<!--[if !IE]><!-->
<div id="smooth_transition"></div>
<!--<![endif]-->
<!-- iframe shim -->
<div id="click_to_start">
</div>
</div>

<!-- PLAYLISTS -->
<div id="playlist" style="position: absolute; bottom: 10px; width:596px; height:40px;left:50%; margin-left:-348px; overflow: auto; background: silver; border: 1px solid black">
<div style="margin-left: 10px; margin-top:10px; margin-right: 10px">
<a style="cursor: pointer" onclick="frames['my_music'].location.replace('about:blank'); document.getElementById('click_to_start').style.display='block'; document.getElementById('smooth_transition').style.display='block'">Stop video</a> &nbsp;&nbsp;
<a style="cursor: pointer" onmousedown="document.getElementById('click_to_start').style.display='none'; frames['my_music'].location.replace('http://www.youtube.com/embed/JkQS1MIplKI?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1');document.getElementById('smooth_transition').style.display='block';" onmouseup="setTimeout('document.getElementById(\'smooth_transition\').style.display=\'none\'',500)">Greetings Intro</a>&nbsp;&nbsp;&nbsp;

<a style="cursor: pointer" onmousedown="document.getElementById('click_to_start').style.display='none'; frames['my_music'].location.replace('http://www.youtube.com/embed/sYLDzO1IY-8?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1');document.getElementById('smooth_transition').style.display='block';" onmouseup="setTimeout('document.getElementById(\'smooth_transition\').style.display=\'none\'',500)">Competitive Edge</a>&nbsp;&nbsp;&nbsp;

<a style="cursor: pointer" onmousedown="document.getElementById('click_to_start').style.display='none'; frames['my_music'].location.replace('http://www.youtube.com/embed/CE022-_h_YU?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1');document.getElementById('smooth_transition').style.display='block';" onmouseup="setTimeout('document.getElementById(\'smooth_transition\').style.display=\'none\'',500)">Competitive Edge</a>&nbsp;&nbsp;&nbsp;

<a style="cursor: pointer" onmousedown="document.getElementById('click_to_start').style.display='none'; frames['my_music'].location.replace('http://www.youtube.com/embed/3Z7C-tuvsKY?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1');document.getElementById('smooth_transition').style.display='block';" onmouseup="setTimeout('document.getElementById(\'smooth_transition\').style.display=\'none\'',500)">Competitive Edge</a>&nbsp;&nbsp;&nbsp;

</div>
</div>
</body>

</html>

**mlegg** · 11-06-2011, 02:37 AM

Is there a way to take that a step further? Rather than the video name being a link? Can it make small thumbnails or previews of the videos to choose from?
thanks

**molendijk** · 11-06-2011, 11:27 AM

See this for getting thumbnail-links instead of using text-links.
Arie.

**molendijk** · 11-06-2011, 02:34 PM

Just to be sure you understand what I mean, I made an example page for you. The images don't scroll, but there are examples for it on DynamicDrive, I guess. Here's the page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>

<style type="text/css">
.video_position_size {position: absolute; left:120px; top: 70px; right: 120px; bottom: 70px; border:1px solid black}
</style>


<script type="text/javascript">
function load_video(which)
{
frames['my_videos'].location.replace('http://www.youtube.com/embed/'+which+'?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1');document.getElementById('smooth_transition').style.display='block'; setTimeout("document.getElementById('smooth_transition').style.display='none'",500)
}
</script>

</head>

<body style="font-family: verdana; font-size:12px" >

<!-- VIDEO CONTAINER. Just an example of loading / replacing videos without flicker in IE. Document.write the iframes if you want validation for a strict doctype  -->
<div class="video_position_size">
<iframe name="my_videos" src="http://www.youtube.com/embed/JkQS1MIplKI?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1" style="position: absolute; width: 100%; height: 100%; background: black" frameborder="0"></iframe>
</div>



<!-- Smooth transition   -->
<!--[if IE]>
<div class="video_position_size">
<iframe id="smooth_transition" src="http://www.youtube.com/apiplayer?version=3&video_id" style="position: absolute; width: 100%; height: 100%; overflow: hidden; display: none"></iframe>
</div>
<![endif]-->
<!--[if !IE]><!-->
<div id="smooth_transition"></div>
<!--<![endif]-->


<!-- PLAYLISTS -->
<div style="position: absolute; bottom: 0px; width:460px; left:50%; margin-left:-230px; overflow: auto; border: 0px solid red; padding-left: 10px">

<a style="position: relative; cursor: pointer; top: -25px; padding: 5px; background: black; color: white" onclick="frames['my_videos'].location.replace('about:blank'); document.getElementById('smooth_transition').style.display='block'">Stop video</a> &nbsp;&nbsp;

<a onclick="load_video('JkQS1MIplKI')"><img src="http://img.youtube.com/vi/JkQS1MIplKI/1.jpg" height="60" title="competitive 1" alt="" style="cursor: pointer"></a>&nbsp;

<a onclick="load_video('sYLDzO1IY-8')"><img src="http://img.youtube.com/vi/sYLDzO1IY-8/1.jpg" height="60" title="competitive 2" alt="" style="cursor: pointer"></a>&nbsp;

<a onclick="load_video('CE022-_h_YU')"><img src="http://img.youtube.com/vi/CE022-_h_YU/1.jpg" height="60" title="competitive 3" alt="" style="cursor: pointer"></a>&nbsp;

<a onclick="load_video('3Z7C-tuvsKY')"><img src="http://img.youtube.com/vi/3Z7C-tuvsKY/1.jpg" height="60" title="competitive 4" alt="" style="cursor: pointer"></a>&nbsp;

</div>

</body>

</html>

Arie.

**mlegg** · 11-06-2011, 03:27 PM

Yes that's what I've been racking my head trying to do. So let's say I put 10 videos in there, does that little preview box under the video get larger?

thanks

**molendijk** · 11-06-2011, 06:11 PM

Not necessarily. If you want the div containing the thumbnails to have a fixed width, you must make it scrollable, like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>

<style type="text/css">
.video_position_size {position: absolute; left:120px; top: 90px; right: 120px; bottom: 90px; border:1px solid black}
</style>


<script type="text/javascript">
function load_video(which)
{
frames['my_videos'].location.replace('http://www.youtube.com/embed/'+which+'?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1');document.getElementById('smooth_transition').style.display='block'; setTimeout("document.getElementById('smooth_transition').style.display='none'",500)
}
</script>

</head>

<body style="font-family: verdana; font-size:12px" >

<!-- VIDEO CONTAINER. Just an example of loading / replacing videos without flicker in IE. Document.write the iframes if you want validation for a strict doctype  -->
<div class="video_position_size">
<iframe name="my_videos" src="http://www.youtube.com/embed/JkQS1MIplKI?rel=0&amp;autoplay=1&amp;showinfo=0&amp;start=0&amp;autohide=0&amp;modestbranding=1" style="position: absolute; width: 100%; height: 100%; background: black" frameborder="0"></iframe>
</div>



<!-- Smooth transition   -->
<!--[if IE]>
<div class="video_position_size">
<iframe id="smooth_transition" src="http://www.youtube.com/apiplayer?version=3&video_id" style="position: absolute; width: 100%; height: 100%; overflow: hidden; display: none"></iframe>
</div>
<![endif]-->
<!--[if !IE]><!-->
<div id="smooth_transition"></div>
<!--<![endif]-->


<!-- Stop button -->
<div style="position: absolute; top: 1px; right: 1px;cursor: pointer; padding: 5px; background: black; color: white" onclick="frames['my_videos'].location.replace('about:blank'); document.getElementById('smooth_transition').style.display='block'">Stop video</div>


<!-- PLAYLIST -->

<!-- We have 4 thumbnails. Each thumbnail's width equals 80px. Suppose we only want to explicitly show 3 thumbnails. Then the width of the outermost div for the playlist must equal 3x80=240px. The width of the innermost div must ewqual 4x80=230px. -->

<div style="position: absolute;bottom: 5px;left: 50%; margin-left: -150px;  width: 240px; overflow: auto; border:1px solid black">

<div style="width: 320px">

<a style="float: left" onclick="load_video('JkQS1MIplKI')"><img src="http://img.youtube.com/vi/JkQS1MIplKI/1.jpg" height="60" width="80" title="competitive 1" alt="" style="cursor: pointer"></a>

<a style="float: left"  onclick="load_video('sYLDzO1IY-8')"><img src="http://img.youtube.com/vi/sYLDzO1IY-8/1.jpg" height="60" width="80"  title="competitive 2" alt="" style="cursor: pointer"></a>

<a style="float: left"  onclick="load_video('CE022-_h_YU')"><img src="http://img.youtube.com/vi/CE022-_h_YU/1.jpg" height="60" width="80"  title="competitive 3" alt="" style="cursor: pointer"></a>

<a style="float:left" onclick="load_video('3Z7C-tuvsKY')"><img src="http://img.youtube.com/vi/3Z7C-tuvsKY/1.jpg" height="60" width="80"  title="competitive 4" alt="" style="cursor: pointer"></a>

</div>

</div>

</body>

</html>

Play with it until you understand everything.
(Note: some of your videos have been deleted).
===
Arie.

**Afsal** · 09-22-2012, 12:58 PM

Originally Posted by mlegg

I would like it so that under the main YouTube player would be a scrolling images list with the small videos rather than the list being on the player . . .

Here is the solution dear!

Code:

 <iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/videoseries?list=PL6B3A5E1C22C42BA8&showinfo=1" width="560"></iframe>

Thread: YouTube playlist embed question

Thread Tools

Search Thread

YouTube playlist embed question

Here is the solution!

Bookmarks

Bookmarks

Posting Permissions