Blog Comments

  1. 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.
  2. 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
  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. 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.
  5. 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.
  6. molendijk's Avatar
    Corrected an error in the script (given above).
    Made sure that the demos validate.
    ===
    Arie
  7. molendijk's Avatar
    Quote Originally Posted by Twey
    Better to use document.write() than an <iframe>, since <iframe>s have greater accessibility problems (for JS-enabled users, anyway; whichever way you go, of course you must have non-JS fallbacks in place) and have been explicitly deprecated in modern HTML standards.
    Thanks for the comment. I was primarily thinking of non-IE, which allows the <object type="text/html">.
    ===
    Arie.
  8. Twey's Avatar
    We could alternatively replace the lines in dynamically_create_ifrobj.js (see above) with the following, using document.write, but it's better to avoid document.write as much as you can:
    Better to use document.write() than an <iframe>, since <iframe>s have greater accessibility problems (for JS-enabled users, anyway; whichever way you go, of course you must have non-JS fallbacks in place) and have been explicitly deprecated in modern HTML standards.
  9. molendijk's Avatar
    Forget what I said above about IE<5.5. It won't work in those old IE-browsers since they treat the iframe as a windowed element.
    ===
    Arie.
    Updated 03-15-2009 at 08:52 PM by molendijk
Page 3 of 3 FirstFirst 123