Playing 'watch_popup videos' using the YouTube Api for embedding videos

YouTube offers users to view their videos in 'popup mode', thus allowing them to watch videos without the annoying comments and ads. Another good thing about watch_popup videos is that YouTube doesn't impose constraints on their width and height. So we'll never see 'video too small' (instead of the real video) when we create very small videos.

The Future of Embedding.

►

Urls for watch_popup videos typically look like http://www.youtube.com/watch_popup?v=VIDEO_ID. We can force the videos to play in a given quality by adding the appropriate parameter to the URL, like this (for instance): http://www.youtube.com/watch_popup?v=VIDEO_ID&tamp;vq=large ('large'= 480p). We can also skip part of the video by providing the appopriate parameter for its start point: http://www.youtube.com/watch_popup?v=VIDEO_ID&tamp;vq=large&tamp;start=some_integer. We can even create playlists. Here's a real world example: http://www.youtube.com/watch_popup?v=AVgbEkBWuqs&tamp;vq=large&tamp;start=2&tamp;playlist=bHQqvYy5KYo,GBaHPND2QJg. This will play 3 videos with ID=AVgbEkBWuqs, bHQqvYy5KYo and GBaHPND2QJg, respectively.

There are also things that watch_popup videos won't allow. We can't force them to NOT SHOW thumbnails for suggested videos (at the end of the video) by simply adding &tamp;rel=0 to the url. And we can't force an end point for watch_popup videos by adding &tamp;end=some_integer. But - fortunately enough- the YouTube Player API for Iframe Embeds lets us embed watch_popup videos (althought it was not specifically designed for this). So the question is: can we use the YouTube Player API for hiding suggested videos at the end of watch_popups and for creating end points for those videos?

I created a script proving that this is indeed possible (but see below for a complication pertaining to playlists). I put the script in a file called watch_popup_yt_api.js (click to see what must be put inside it). To make it work, please do the following:

Put the following lines in the head (it is assumed here that the file of the second script belongs to the same folder as the file into which the script is inserted):
<script src="http://www.youtube.com/player_api"></script>
<script src="watch_popup_yt_api.js"></script>
In the body, create links like the following (real examples used as demos):
Single video starting at the very beginning and running to the end:

<a href="javascript: void(0)" onclick="info_video('The purpose of life'); load_video('GBaHPND2QJg','400px','200px')">Cool Flash Mob</a>.
Demo here (no suggested videos at the end!).
Single video starting at 50 secs from the beginning and running to the end:

<a href="javascript: void(0)" onclick="info_video('The purpose of life'); load_video('GBaHPND2QJg', '400px', '200px', 50)">Cool Flash Mob</a>.
Demo here (no suggested videos at the end!).
Single video starting at the very beginning and stopping after 50 secs:

<a href="javascript: void(0)" onclick="info_video('The purpose of life'); load_video('GBaHPND2QJg','400px','200px', 0, 50)">Cool Flash Mob</a>.
Demo here (no suggested videos at the end!).
Single video starting at 50 secs from the beginning and running for 20 secs (= stopping at 70 secs):

<a href="javascript: void(0)" onclick="info_video('The purpose of life'); load_video('GBaHPND2QJg', '400px', '200px', 50, 70)">Cool Flash Mob</a>.
Demo here. (no suggested videos at the end!).
Playlist:

<a href="javascript: void(0)" onclick="info_video('This is a playlist'); load_playlist('GBaHPND2QJg,bHQqvYy5KYo,AVgbEkBWuqs', '400px', '200px');">Playlist</a>
No spaces between the members of the playlist!!!.
Demo here (no suggested videos at the end!).

Further explanations / remarks:

It is not possible (yet) to create start points and end points for the videos of a playlist. At this moment, I don't know how we could change this (if we want to play watch_popup videos using the YouTube Api for embedding videos).
The function info_video('bla') puts info on top of the video (here: bla). You must use it even if you don't want info on top. In that case, do info_video(''). You can write HTML into the info-area provided you use backslah escape characters. Example: info_video('<b>bla<\/b>') (not info_video('<b>bla</b>')).
The pixel values given in the functions load_video and load_playlist specify the width and the height, respectively, of a video.
The videos have buttons for play, pause, stop, replay, mute and unmute. If you don't want the buttons, or if you only want some of them, open watch_popup_yt_api.js. There's a line in there that starts with the_player =. In the string for the_player, remove the buttons you don't want. Make sure to save the js-file first somewhere in order to prevent accidents.
Of course, we can use image links for opening YouTube videos. Demo: the image on top, to the right ('The Future of Embedding'; view source of page to see how this is done). This demo also shows that the videos will always be displayed within the visible part of the window, even if the link is positioned at the extreme right.
The position of a video appearing after a click on a link is determined by the position of the click.
The videos are absolutely positioned (automatically). Giving them 'position: relative' has issues I haven't been able yet to resolve.
VERY IMPORTANT:
In watch_popup_yt_api.js there is a line the_player=.... At the end of the string for 'the_player'), we have src=...v=IBRqwnGferM, which is the ID of an existing YouTube video. You should be able to see it here. If it's not available, this means that the video has been removed, implying that our script won't work anymore. To make it work again, just replace IBRqwnGferM with another valid video-id, preferably one corresponding to a blank (silent) video.