Advanced Search

Page 1 of 4 123 ... LastLast
Results 1 to 10 of 33

Thread: YouTube playlist embed question

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Question YouTube playlist embed question

    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>

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    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.
    ===

  3. #3
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    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.


  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    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>

  5. #5
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    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

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

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

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    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.

  8. #8
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    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

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    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.
    Last edited by molendijk; 11-06-2011 at 07:15 PM. Reason: Correction in text

  10. #10
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Here is the solution!

    Quote Originally Posted by mlegg View Post
    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>
    Last edited by jscheuer1; 09-23-2012 at 12:31 AM. Reason: format

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •