Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Loading YouTube videos using the most recent YouTube embed code

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default Loading YouTube videos using the most recent YouTube embed code

    1) CODE TITLE:
    Loading YouTube videos using the most recent YouTube embed code

    2) AUTHOR NAME: Arie Molendijk

    3) DESCRIPTION:
    A script for:
    - embedding YouTube videos using the most recent YouTube embed code;
    - creating playlists having text-links or thumbnail-links;
    - adding customized info to the videos;
    - closing videos and then replaying them without loss of parameters (like the chosen starting point of a video);
    - making smooth transitions between videos (IE!).

    Well, it's not just javascript that makes this work, but a carefully defined interaction between js, css and html.

    4) ATTACHED:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.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">
    /* POSITION / SIZE OF THE VIDEOS. Replace values for left, top, right and bottom with whatever you want. Experiment with it.  */
    .video_container {position: absolute; left:120px; top: 120px; right: 120px; bottom: 110px; border: 1px solid black}
    /* POSITION / SIZE OF THE VIDEOS INFO BOX placed above the video. Values for left and right must be the same as the values given to left and right for the videos.  The top value for the info box is 40px lower than the top value for the video, since the height of the box equals 40 px. */
    .video_info {position: absolute; left:120px; top: 80px; right: 120px; height: 40px; bottom: 110px; background: black; color: white; overflow: auto; text-align: center; font-family: verdana; font-size:11px; padding-top:5px}
    /* POSITION / SIZE OF THE VIDEOS STOP BUTTON placed above the video (top right). Value for top must be the same as the top value given for the video_info box. Value for right must be 17px higher than the right value given for the video_info box (needed because of a possible scroll bar in the video-info box). */
    .stop_button {position: absolute; top: 80px; right: 137px;cursor: pointer; background: black; color: white;font-weight: bold}
    </style>
    <script type="text/javascript">
    /* Function for loading videos. 
    Usage (just some examples): 
    onclick="load_video('XT_1iRIQqsQ','','') (video starts at the beginning; no video-info
    onclick="load_video('XT_1iRIQqsQ',null,'') (video starts at the beginning; no video-info
    onclick="load_video('XT_1iRIQqsQ',0,'') (video starts at the beginning; no video-info
    onclick="load_video('XT_1iRIQqsQ',50,'') (video starts at 50 secs from start; no video-info
    onclick="load_video('XT_1iRIQqsQ',150,'Some <b>info<\/b> <i>here<\/i>') (video starts at 150 secs from start; video-info
    etc.
    Note: you must use backslash characters for the HTML in the info-box
    Change the values for rel, autoplay, showinfo, autohide and modestbranding below, and see what happens
    */
    function load_video(video_id,beginpoint,info_about_video)
    {
    frames['my_videos'].location.replace('http://www.youtube.com/embed/'+video_id+'?start='+beginpoint+'&amp;rel=0&amp;autoplay=1&amp;showinfo=0&amp;autohide=0&amp;modestbranding=1');
    
    //Don't edit below. These lines ensure smooth transition between videos and solid functioning in all modern browsers
    document.getElementById('smooth_transition').style.display='block'; 
    document.getElementById('video_container').style.width='100px';
    document.getElementById('video_container').style.height='10000px';
    document.getElementById('video_container').style.left='-100px';
    document.getElementById('video_container').style.visibility='hidden';
    if(document.getElementById('info').innerHTML.length>0){document.getElementById('info').innerHTML=info_about_video} else {document.getElementById('info').innerHTML=''};
    document.getElementById('replay').style.display='none';
    setTimeout("document.getElementById('smooth_transition').style.display='none'",3500)
    setTimeout("document.getElementById('video_container').style.width=''",3500)
    setTimeout("document.getElementById('video_container').style.height=''",3500)
    setTimeout("document.getElementById('video_container').style.left=''",3500)
    setTimeout("document.getElementById('video_container').style.visibility='visible'",150)
    current_video=video_id
    current_beginpoint=beginpoint
    current_info=info_about_video
    }
    //Start a video on page load
    function start_video_onload()
    {
    load_video('Tek_i2d7bP4',0,'<br><b>The Cro-Magnon Man<\/b>')
    }
    window.onload=start_video_onload
    </script>
    </head>
    <!-- The body must have 'overflow: hidden' in order for all of this to function well  -->
    <body style="font-family: verdana; font-size:12px;overflow: hidden" ><div>
    <!-- VIDEO CONTAINER. We document.write the iframe for validation  -->
    <div id="video_container" class="video_container">
    <script type="text/javascript">
    document.write('<iframe name="my_videos" style="position: absolute; width: 100%; height: 100%; background: black" frameborder="0"><\/iframe>')
    </script>
    </div>
    <!-- REPLAY BUTTON appears after a click on the stop button  -->
    <div id="replay" style="position: absolute; color: white; background: black; left:48%;top: 50%; cursor: pointer; z-index: 1; display:none" onclick="load_video(current_video,current_beginpoint,current_info)">Replay</div>
    <!-- SMOOTH VIDEO TRANSITION. The iframe used for showing the load icon is document.written in non-IE for validation. You must create a separate file called 'loading.html'. In this file we must put:
    <body style="background: black">
    <div style="position: absolute; left:50%; top: 50%; margin-left:-50px; margin-top: -50px"><img src="loading.gif" height="40" width="80"></div>
    Note that we should have a transparent loading gif. Can be found on the Internet.
    -->
    <!--[if IE]>
    <div  class="video_container" style="border: 1px solid black; background: black">
    <iframe name="smooth_transition" id="smooth_transition" src="loading.html" style="position: absolute; width: 100%; height: 100%; overflow: hidden; " frameborder="0"></iframe>
    </div>
    <![endif]-->
    <!--[if !IE]><!-->
    <div  class="video_container" style="border: 1px solid black;">
    <script type="text/javascript">
    document.write('<iframe name="smooth_transition" id="smooth_transition" src="loading.html" style="position: absolute; width: 100%; height: 100%; overflow: hidden; " frameborder="0"><\/iframe>')
    </script>
    </div>
    <!--<![endif]-->
    <!-- INFO BOX -->
    <div id="info" class="video_info">info</div>
    <!--The STOP BUTTON. We need the delay for IE -->
    <div class="stop_button" onclick="setTimeout('frames[\'my_videos\'].location.replace(\'about:blank\')',500); document.getElementById('replay').style.display='block'">X</div>
    <!-- PLAYLIST USING THUMBNAILS -->
    <!-- In this example-list, we have 4 thumbnails. For a YouTube video having id='XT_1iRIQqsQ' (for instance), you can find a corresponding thumbnail by writing <img src="http://img.youtube.com/vi/XT_1iRIQqsQ/1.jpg" bla bla> or <img src="http://img.youtube.com/vi/XT_1iRIQqsQ/2.jpg" bla bla> or <img src="http://img.youtube.com/vi/XT_1iRIQqsQ/3.jpg" bla bla>
    Each thumbnail's width equals 80px here. Suppose we only want to explicitly show 3 thumbnails. Then the width of the outer div for the playlist must equal 3x80=240px. The width of the inner div must ewqual 4x80=320px. -->
    <!-- Outer div for the playlist  -->
    <div style="position: absolute;bottom: 5px;left: 50%; margin-left: -120px;  width: 240px; overflow-y: hidden; overflow-x: auto; border:2px solid black">
    <!-- Inner div for the playlist  -->
    <div style="width: 320px">
    <a style="float: left" onclick="load_video('XT_1iRIQqsQ',0,'<b>Rachmaninov<\/b>: Symphony No. 2 - Second Movement<br><i>Alasdair Neale<\/i>, San Francisco Youth Symphony')"><img src="http://img.youtube.com/vi/XT_1iRIQqsQ/1.jpg" height="60" width="80" title="Rachmaninov" alt="" style="cursor: pointer"></a>
    <a style="float: left"  onclick="load_video('jmOxTx0szas',3, '<b>Mendelssohn<\/b>: Symphony No. 4 - Second Movement<br><i>Ulyses Ascanio<\/i>, National Youth Orch. of Venezuela')"><img src="http://img.youtube.com/vi/jmOxTx0szas/1.jpg" height="60" width="80"  title="Mendelssohn" alt="" style="cursor: pointer"></a>
    <a style="float: left"  onclick="load_video('vt4X7zFfv4k',17,'<br><b>The Beauty of SOCCER<\/b>')"><img src="http://img.youtube.com/vi/vt4X7zFfv4k/1.jpg" height="60" width="80"  title="Soccer" alt="" style="cursor: pointer"></a>
    <a style="float:left" onclick="load_video('Tek_i2d7bP4',0,'<br><b>The Cro-Magnon Man<\/b>')"><img src="http://img.youtube.com/vi/Tek_i2d7bP4/2.jpg" height="60" width="80"  title="The Cro-Magnon Man" alt="" style="cursor: pointer"></a>
    </div></div>
    <!-- PLAYLIST USING TEXT LINKS. DON'T FORGET TO USE THE 'HREF=...' IN THE TEXT LINKS, AS NOT USING IT MAY CAUSE FLICKER ON VIDEO TRANSITION IN IE-->
    <div style="position: absolute; top: 40px; left: 50%; width: 340px; margin-left: -170px; ">
    <a href="javascript: void(0)" style="color: darkred" onclick="load_video('XT_1iRIQqsQ',0,'<b>Rachmaninov<\/b>: Symphony No. 2 - Second Movement<br><i>Alasdair Neale<\/i>, San Francisco Youth Symphony')">Rachmaninov</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript: void(0)" style="color: darkred" onclick="load_video('jmOxTx0szas',3, '<b>Mendelssohn<\/b>: Symphony No. 4 - Second Movement<br><i>Ulyses Ascanio<\/i>, National Youth Orch. of Venezuela')">Mendelssohn</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript: void(0)" style="color: darkred" onclick="load_video('vt4X7zFfv4k',17,'<br><b>The Beauty of SOCCER<\/b>')">Soccer</a>&nbsp;&nbsp;&nbsp;
    <a href="javascript: void(0)" style="color: darkred" onclick="load_video('Tek_i2d7bP4',0,'<br><b>The Cro-Magnon Man<\/b>')">Cro-Magnon</a>
    </div>
    <!-- ENJOY!  -->
    </div></body>
    </html>
    Demo HERE. Detailed explanations in the source of the file.

  2. #2
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks ! Looks good.

  3. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,692
    Thanks
    82
    Thanked 90 Times in 88 Posts

    Default

    "This video is no longer available because the uploader has closed their Youtube account."
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    And for the videos that are still good, it doesn't seem to work well in Firefox or Opera. If I switch between Rachmaninoff and Mendelssohn, They restart at the beginning, not resume from where they left off.

    And in Firefox it's worse. I cannot click on the controls inside the video. Firefox uses the HTML 5 video, so that might be part of it. But I've been doing extensive work on another aspect of YouTube videos and simply having Firefox use the HTML 5 in the iframe doesn't compromise the ability to click on the controls inside the video in that browser. So it must be more than that or something else entirely (css?) causing that.

    You might consider using the YouTube javascript api. It's kind of flaky for iframe because, unless the browser elects to use Flash in the iframe, a lot of stuff isn't supported. Here's a link to it for iframe:

    https://developers.google.com/youtub..._api_reference

    They say right out it's experimental. For what I'm doing, it's fine though and lets me support more browsers and devices.

    The older object/embed - Flash or nothing javascript api is much more robust and reliable:

    https://developers.google.com/youtube/js_api_reference

    But, as I indicate in mentioning it, it's the older style Flash or nothing approach.
    Last edited by jscheuer1; 05-21-2012 at 08:13 PM. Reason: less detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    My response is late, because I'm abroad and can use a very old computer at certain moments only.
    The script used to work with all modern browsers, but since a couple of weeks YouTube changed certain things affecting the script.
    I'll recreate the script as soon as I'm home. In the meantime, I would be glad to know whether or not the scripts on the following pages do work:
    http://mesdomaines.nu/music
    http://mesdomaines.nu/lesserknownclassicalmusic
    Thanks,
    Arie.

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Quote Originally Posted by jscheuer1 View Post
    [...] And in Firefox it's worse. I cannot click on the controls inside the video. Firefox uses the HTML 5 video, so that might be part of it. But I've been doing extensive work on another aspect of YouTube videos and simply having Firefox use the HTML 5 in the iframe doesn't compromise the ability to click on the controls inside the video in that browser. So it must be more than that or something else entirely (css?) causing that.
    John, I don't have any problem with Firefox (version 12.0) here. The video controls are working as they should. --- And I use the newest YouTube-embed in the script (iframe and HTML5).
    Arie.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Just checked again, in my Firefox 12.0 with Shockwave Flash 11.2 r202 (but it's using HTML 5 video), under Win 7, still not able to access the video's controls.

    If I remove:

    Code:
    position: absolute;
    from the:

    Code:
    .video_container
    selector, the video becomes very large, but at least I can access its controls.

    Oh, and there are two divs on the page with that class. It's the second one, the one with the loading image iframe in it that appears to be covering the one with the video iframe in it.
    Last edited by jscheuer1; 05-27-2012 at 05:54 PM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Weird! The problem is that I cannot reproduce here what is happening on your computer.
    It might be caused by the new way YouTube embeds its video's, combined with its use of the iframe.
    In the two links I gave above, there's only old fashioned Flash + object. Are the video controls OK there? The links are repeated below:
    mesdomaines.nu/music (video button: top left);
    mesdomaines.nu/lesserknownclassicalmusic (video button: top right).
    Thanks in advance John.
    Arie.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    They both work fine in my Firefox as far as the controls go. And this part I'm not sure about, but it was an issue with the original one in this thread. It was supposed to resume a video if you switched away from it and came back. That wasn't happening in Opera or Firefox for that one, and - what I'm not sure about is whether or not it's supposed to happen with these other two. In any case, it isn't in Firefox.

    Another thing I noticed with both of these is that the scroll state of the video selection menu is not maintained if I close it and reopen it. It probably wasn't supposed to be. I just think it would be a nice touch if it was.

    BTW - some very nice music!

    As for not being able to duplicate the issue with the controls on the original YT page from this thread - what if any are the differences?

    Are you using an earlier Flash version?

    Different OS?

    Does your Firefox use the HTML 5 or Flash method? (When presented with the new iframe method, each browser 'chooses' according to how the code branches for them. My Firefox uses the HTML 5 method.)

    You can tell this last by virtue that the HTML 5 method has tooltips for the pause/play button in the control bar (bottom left), whereas the Flash method does not. There are other differences, but that's the easiest I can think of to explain. But there will be no tooltip in either if you duplicate the problem because the controls are covered. But you'll know if that happens because they won't do anything.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    molendijk (05-27-2012)

  11. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    John, thank you so much for your comment. This helped me a lot!!

    Resuming a video after switching away from it and coming back afterwards is still beyond by limited competence. I'm working on it.

    The scroll state of the video selection menu is not maintained in Firefox, but it is in the other browsers.

    As for not being able to duplicate the issue with the controls on the original YT page from this thread - the difference is just that I have 'control over the controls' on my computer. I'm using Flash version 0,2,152,32.

    My Firefox (12.0) uses the HTML5 method on the original YT page from this thread (tooltips are present). But I just use Flash and an object (no iframe) in the two sites you just commented.

    For now, I'm very happy with your comment on these sites. They do what they are supposed to do. I will try to see if I can obtain the same results when using the HTML5 method, with an iframe.

    Thanks very much!

    Arie.
    Last edited by molendijk; 05-27-2012 at 11:20 PM. Reason: Adding a line

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
  •