CSS Codes
CSS Layouts
View RSS Feed

molendijk

YouTube Chromeless Player

Rating: 19 votes, 3.63 average.
7 Comments
by
molendijk
, 08-26-2009 at 06:29 PM (69347 Views)
It's not directly obvious from this how we can:
- start a movie on page load (question asked by some people on different forums);
- specify the dimensions and position of the movies in percentages;
- make good use of the ytplayer functions.

Autoplay: something like
Code:
function so_start()
{
loadNewVideo('lKq9_kk3Zbc', 20);
}
//IE needs some time
window.onload=setTimeout('so_start()',2000)
Size of movie in percentages (sort of):
Code:
Something like:
var width_of_movie=screen.availWidth/1.33+"px"
var height_of_movie=screen.availHeight/1.79+"px"

and then:
// <![CDATA[

     // allowScriptAccess must be set to allow the Javascript from one
     // domain to access the swf on the youtube domain
     var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
     // this sets the id of the object or embed tag to 'myytplayer'.
     // You then use this id to access the swf and make calls to the player's API
     var atts = { id: "myytplayer" };
     swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
                        "ytapiplayer", width_of_movie, height_of_movie, "8", null, null, params, atts);
     //]]>
Left and top of movie:
Code:
<div style="position:absolute;left:22%;top:10%;border:1px inset black">
<div id="ytapiplayer" >
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<!-- Buttons etc. for the movie -->
<div style="text-align: center; font-size:10px; border:1px outset silver; padding-bottom:3px; background:white;">
<a href="javascript:void(0);" onclick="play();"><img src='play.jpg' height='14' style='border:0' title='Play' alt=""></a>
etc.
</div>
</div>
ytplayer functions in a menu:
Code:
<a href="javascript:void(0)" onclick="loadNewVideo('yGYQtNAHbX4', 10)">Mary Stuart<br>(direct start at 10 secs)</a><br><br>
<a href="javascript:void(0)" onclick="cueNewVideo('lKq9_kk3Zbc', 80)">Zarathustra<br>(button start at 80 secs)</a><br><br>
<a href="javascript:void(0)" onclick="loadNewVideo('-o2lYktVy3I', 0)">Lisitsa plays the piano</a>
DEMO here. See source for (manipulations of) other ytplayer functions, like the stop function (not so good in the original), functions for fast forward / backward, functions for going to the beginning / the end of the video.
===
Arie.

Submit "YouTube Chromeless Player" to del.icio.us Submit "YouTube Chromeless Player" to StumbleUpon Submit "YouTube Chromeless Player" to Google Submit "YouTube Chromeless Player" to Digg

Updated 08-29-2009 at 01:59 PM by molendijk

Categories
Post a JavaScript , Flash related

Comments

  1. jimiayler's Avatar
    Very cool -- thanks for sharing this.

    Here's something we're working on I'd greatly appreciate your help on: we're trying to overlay images on top of the embedded player, and allow anyone to paste in any YouTube URL. The second part should be easy enough using some substring form function isolating the vid ID and populating the player with the desired YouTube clip. For the overlay, we originally thought we could download the API and revise the code in an .fla and add our images to the library and output a new .swf, though that appears more complicated than we anticipated. There's probably an easier DHTML layer solution where someone could click on a graphic and have the image overlay in a higher z-index (and, of course, a separate click for removing the overlay), but I don't pretend to be a monster coder, and I don't know if there would be any cross-browser issues.

    Any help/code samples you could provide that might achieve this functionality for an embedded Chromeless YouTube player would be hugely helpful.
  2. molendijk's Avatar
    Pasting in a YouTube URL isn't a problem, see this.
    As for putting text or images on top of the player, you just have to replace var atts = { id: "myytplayer"}; in the script with var atts = { id: "myytplayer", wmode:"transparent" };
    ===
    Arie.
  3. jimiayler's Avatar
    Thanks very much, Arie -- that did it.

    For those who are interested in a working solution for what I discussed, as well as the YouTube comedic "shred" tradition (!), here's a relevant code snippet, based on the "Chromeless" example page (http://code.google.com/apis/youtube/...example_1.html ):

    Code:
    <div id="container">
    <span id="imageholder" style="position:absolute; float:left; top:0px; left:0px; z-index:99;">
    	<img src="images/anyold.png" alt="" width="425" height="344"  />
   	</span>
	<div style="position:absolute; float:left; top:0px; left:0px; z-index:1;">
		<script type="text/javascript">
			  // <![CDATA[
		
			  // allowScriptAccess must be set to allow the Javascript from one 
			  // domain to access the swf on the youtube domain
			  var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
			  // this sets the id of the object or embed tag to 'myytplayer'.
			  // You then use this id to access the swf and make calls to the player's API
			  var atts = { id: "myytplayer", wmode:"transparent" };
			  swfobject.embedSWF("http://www.youtube.com/v/EXEbJB4k5Bo&amp;border=0&amp;enablejsapi=1&amp;playerapiid=ytplayer",
								 "ytapiplayer", "425", "344", "8", null, null, params, atts);
			  //]]>
		</script>
	</div>
</div>
    Really wish people would post solutions more in these forums, rather than say "Yep, now it's working! So long!" : }

    Thanks again, man.
  4. jimiayler's Avatar
    Ackkk! Not so fast! This code snippet doesn't work in IE, namely most browsers!

    Basically, the YouTube embed is ignoring the z-index in IE, so it overlays the PNG, not vice versa -- but it's fine in Firefox and Safari. Playing with the security settings doesn't seem to help, either, and we all know most users couldn't be counted on to do that.

    BTW -- I've also tried the "quirksmode" parent-in-a-higher-z-index workaround, but the embedded player is still overlaying the PNG.

    Have you ever seen something like that, and/or have any ideas? Thanks again.
    Updated 09-22-2009 at 07:56 PM by jimiayler
  5. molendijk's Avatar
    Strange!
    I managed to get an invisible layer on top of a non-skinned video here (experimental). Works also for IE, so there should be a solution to your problem.
    ===
    Arie.
  6. jscheuer1's Avatar
    I think this is a violation of the YouTube TOS:

    You agree not to access User Submissions (defined below) or YouTube Content through any technology or means other than the video playback pages of the Website itself, the YouTube Embeddable Player, or other explicitly authorized means YouTube may designate.

    If you use the YouTube Embeddable Player on your website, you must include a prominent link back to the YouTube website on the pages containing the Embeddable Player and you may not modify, build upon, or block any portion of the Embeddable Player in any way.
  7. molendijk's Avatar
    No, it's not: this thread is not about the embeddable player, but about the chromeless player.
    ===
    Arie.