Loading YouTube videos using the most recent YouTube embed code

**molendijk** · 11-08-2011, 10:07 PM

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.

**hrfassoc** · 05-18-2012, 08:06 PM

Thanks ! Looks good.

**james438** · 05-21-2012, 07:37 PM

"This video is no longer available because the uploader has closed their Youtube account."

**jscheuer1** · 05-21-2012, 09:03 PM

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.

**molendijk** · 05-26-2012, 04:55 PM

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.

**molendijk** · 05-27-2012, 01:00 PM

Originally Posted by jscheuer1

[...] 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.

**jscheuer1** · 05-27-2012, 06:45 PM

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.

**molendijk** · 05-27-2012, 07:56 PM

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.

**jscheuer1** · 05-27-2012, 11:11 PM

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.

**molendijk** · 05-28-2012, 12:09 AM

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.

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

Thread Tools

Search Thread

Loading YouTube videos using the most recent YouTube embed code

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

Bookmarks

Bookmarks

Posting Permissions