Blog Comments

  1. jscheuer1's Avatar
    Oh, and another thing, I think this is a TOS violation. From 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.
  2. jscheuer1's Avatar
    I was just using this code in an actual job. Not the chopped stuff, but the valid cross browser tag. I discovered that these highlighted parts don't really seem to be required:

    <!--[if IE]>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="position:absolute;left:20%; top:20%; height:80%;width:80%">
    <!--[if !IE]><!-->
    <object type="application/x-shockwave-flash" style="position:absolute;left:20%; top:20%; height:80%;width:80%" data=";start=164&amp;end=199&amp;cid=28051" >
    <param name="movie" value=";start=164&amp;end=199&amp;cid=28051" >
    <param name="allowFullScreen" value="true" >
    <param name="wmode" value="transparent" >
    They're for getting it to work in IE while at the same time not making others barf, right? Well without them it worked fine in IE (5.5 thru 8), Opera (10), Firefox (3), Chrome (4), and Safari (4 Win).

    Additionally, if Flash wasn't installed in IE, and you use those highlighted parts, you end up with a stray fragment of a comment, something like:

    showing up on the page.
  3. molendijk's Avatar
    I'm afraid I didn't explain very well what I had in mind.
    If we have something like this:
    <script type="text/javascript">
    function HttpRequest(url){
    var pageRequest = false //variable to hold ajax object
    @if (@_jscript_version >= 5)
    try {
    pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
    catch (e){
    try {
    pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
    catch (e2){
    pageRequest = false
    if (!pageRequest && typeof XMLHttpRequest != 'undefined')
    pageRequest = new XMLHttpRequest()
    if (pageRequest){ //if pageRequest is not false'GET', url, false) //get page synchronously
    <a href="javascript:void(0)" onclick = "document.getElementById('external').style.display = 'block'">external page</a> 
    <div id="external"  style="display:none;"><script type = "text/javascript">HttpRequest("external.html")</script></div>
    then clicking on the link (faking an update of the page) gives us the text of the external page PLUS its code. So there's no need to add the script to the (main) page using the DOM.
    (In spite of this, if the external file is a HTML-menu depending partially on javascript, then it may not work well in IE if the menu contains a mixture of internal and external scripts. The workaround is to make all scripts (in the menu) external).
    We would only have to add the script to the main page if we used another inclusion method, like innerHTML or appendChild.
  4. jscheuer1's Avatar
    I don't think so. My suggestion is:

    1. Make the script external (what you are doing anyway).
    2. Add the script to the page using the DOM.
  5. molendijk's Avatar
    If one is going to make one's scripts external anyway, one may simply create a DOM script tag, name the external script as its src attribute, and append the tag to the document.
    That would be (almost) the same thing as (i) making the scripts external; (ii) removing them from the file we want to insert into the encompassing page (to avoid conflicts) and then (iii) putting them directly in the (encompassing) page. So that would mean that some extra steps should be made, since I only do (i). Right? (or wrong?).
  6. jscheuer1's Avatar
    Ideally the responseXML, not the responseText should be used with AJAX. However, IE handles this poorly if at all. One may convert the responseText to an XML document of sorts, but you still are dealing with a string.

    It's not document.write that is the real problem here, the innerHTML property has many of the same issues. Neither method would be required if the responseXML could reliably be used in IE. It is reliance upon the responseText that forces us to use string methods. The responseText is a string.

    If one is going to make one's scripts external anyway, one may simply create a DOM script tag, name the external script as its src attribute, and append the tag to the document. Scripts may be executed concurrent with/upon AJAX import in several ways. The one you mention is perhaps the least desirable. Another method is the jQuery .live() method. Yet another is to use event listeners/attachments in such a way as to ensure that imported content will react as desired without having to invoke a new initialization of the script each time new content for it arrives.
  7. molendijk's Avatar
    I think it's YouTiube's fault, since it never happens on DailyMotion and sometimes only on YouTube.
    I developed the thing a little bit further here. In the (main-)menu, scroll down and click on Bach/Loussier: Air on the G-string . Its a DailyMotion-video. You'll see there's no problem there.

    Thanks for the comment.
  8. Schmoopy's Avatar
    It's a good idea, since I come across this sort of thing all the time. The only thing is, after pausing the video and then pressing play again, it either seems to restart from the beginning, or just sort of freeze.
    Don't know if this is the fault of the youtube video or the options that you changed.
    But when viewing the video directly, it doesn't seem to happen.
  9. molendijk's Avatar
    I put the <param name="flashvars" value="autoplay=true" > in the demo.
  10. smansakra's Avatar
    i like what you write here
  11. molendijk's Avatar
    I found out how we can force chopped video's to start playing automatically. Just add:
    <param name="flashvars" value="autoplay=true" >
    (It's not in the demo).
    Updated 10-02-2009 at 12:05 PM by molendijk (Added a feature to chopped video's)
  12. molendijk's Avatar
    John, you're right about the title. I should have chosen something like HTML 4.01 Strict Video Include & Chopping Parts from YouTube video's.
    Anyhow, the point of my code is precisely that we don't need the embed tag for including video's. That's why I put the WC3HTML4.01-icon in the demo.
  13. jscheuer1's Avatar
    Poor choice of title. Although I know you probably didn't mean it like that, the embed tag is not valid in HTML 4.01 Strict.
  14. molendijk's Avatar
    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.
  15. 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
  16. 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 ( ):

    <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"  />
    	<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" };
    								 "ytapiplayer", "425", "344", "8", null, null, params, atts);
    Really wish people would post solutions more in these forums, rather than say "Yep, now it's working! So long!" : }

    Thanks again, man.
  17. 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" };
  18. 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.
  19. molendijk's Avatar
    Corrected an error in the script (given above).
    Made sure that the demos validate.
  20. 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">.
Page 3 of 4 FirstFirst 1234 LastLast