Article:		Hi-Res YouTube Hacks
Subject:		Browser Compatibility
Date:		2008-05-14 01:39:45
From:		DavidBattino
Response to: Browser Compatibility
Thanks for the report. Since I'm not able to test this on IE6 and no one has written me directly, here's the modified code. Please let us know if it works. Basically, I split the external embedding script into two scripts. The first, which you can call poster-swap-o.js, contains this: function viewTubeObj(triggerID,movieURL,movieWth,movieHt) { var objCode = makeCode(movieURL, movieWth, movieHt); document.getElementById(triggerID).innerHTML=objCode; } The second, embed-codemaker.js, contains this: function makeCode(movieURL, movieWth, movieHt) { var theCode = "<object width='" + movieWth + "' height='" + movieHt + "'>"; theCode += "<param name='movie' value='" + movieURL + "&autostart=1'></param>"; theCode += "<param name='wmode' value='transparent'></param>"; theCode += "<embed src='" + movieURL + "&autoplay=1' type='application/x-shockwave-flash' wmode='transparent' width='" + movieWth + "' height='" + movieHt + "'></embed></object>"; return theCode; } Put links to both in your HTML document and link as shown in the article, changing viewTube to viewTubeObj.

Showing messages 1 through 7 of 7.

• Browser Compatibility
  2008-05-14 06:26:24  bhurst [View]
  
  
  The second script exhibits the same behavior in IE6. When you click the picture, it disappears, and the space closes up ... no video appears.
  
  It still works in Firefox and IE7.
  
  B
  
  
• Browser Compatibility
  2008-05-14 10:05:57  David Battino | [View]
  
  
  Curses. Thanks for checking that out. I wonder — what if we set the height and width in the div as well as the placeholder image? Perhaps that would prevent the area from collapsing as the image is swapped out.
• Browser Compatibility
  2008-05-15 01:49:06  bhurst [View]
  
  
  That prevents the collapse, but the movie still doesn't appear. I finally gave up and opted for this much-less-elegant approach.
  
  Javascript Function
  
  
function flipMoviePoster(divIdOne,divIdTwo)
{
document.getElementById(divIdOne).style.display = 'none';
document.getElementById(divIdTwo).style.display = '';
}



Body

<div id="poster" align="center" onclick="flipMoviePoster(this.id,this.id+'2')" style="cursor:pointer;">
<img src="SAN_Provo_002.jpg" alt="Click to Play" width="425" height="355" border="0" />
</div>
<div id="poster2" align="center" style="display:none;">
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/5cwjKwe7a5s&hl=en&ap=%2526fmt%3D18&autostart=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/5cwjKwe7a5s&hl=en&ap=%2526fmt%3D18&autoplay=1"
type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
</div>
</body>
</html>

  
• Browser Compatibility
  2008-05-15 10:13:45  David Battino | [View]
  
  
  Thanks, BHurst. I wonder if the problem in my code is the innerHTML function or that I didn't escape the slashes in the HTML that's written. I'll see if I can wrangle a copy of IE6 and keep experimenting.
• Browser Compatibility
  2008-05-16 09:45:35  bhurst [View]
  
  
  FYI ... I tried escaping the slashes, and that did work either.
  
  Oh well!
  
  B
• Browser Compatibility
  2008-05-16 00:06:27  bhurst [View]
  
  
  I have used innerHTML in other scripts that work in IE6.
  
  I asked our Javascript expert at work to take a look at it, and here is what he said.
  
  My guess is that IE6 doesn't want you to dynamically embed objects. There may not be a way to do this in IE6. Here's one thing to try though. It allowed me to circumvent another IE security "feature".
  
  Here is his suggestion, which didn't work in IE6 either.
  
  
function viewTube(triggerID,movieURL,movieWth,movieHt) {
var div = document.createElement('div'); //Create DIV variable
var embedcode = "<object width='" + movieWth + "&autostart=1' height='" + movieHt + "'>";
embedcode += "<param name='movie' value='" + movieURL + "'></param>";
embedcode += "<param name='wmode' value='transparent'></param>";
embedcode += "<embed src='" + movieURL + "&autoplay=1' type='application/x-shockwave-flash' wmode='transparent' width='" + movieWth + "' height='" + movieHt + "'></embed></object>";
div.innerHTML = embedcode; //Assign embedcode to DIV variable
document.getElementById(triggerID).innerHTML = ""; //Clear DIV
document.getElementById(triggerID).insertBefore(div,null); //Insert new DIV content
}

• Browser Compatibility
  2008-08-19 17:09:32  Mannni [View]
  
  
  You need to use document.write to make this work on IE6.
  
  Either rewrite the function so that you can place it in the document flow directly where the video should appear, or dynamically create an iframe with its src linked to an empty HTML document (containing <html><body></body></html>) on the same domain; then you can document.write to it anytime.
  Uhm... sorry, that might sound complicated, a little bit slower:
  To replace a YT embedded object with your code:
  1. Create an iframe object using document.createElement.
  1.5 Set the iframe's src to emptyhtmldoc.html (as described above).
  2. Fetch the old embed code from the DOM and modify it as you need it.
  3. Delete the old code from the document.
  4. Hook in your iframe there.
  5. document.write the modified object code to the iframe (document.getElementById('iframeid').contentWindow.document.write(newhtml)). Don't set innerHTML or DOM methods as this would again knock IE6 out :) .
  
  I have written scripts using this method many times (actually started with it to prevent IE6's "Click to activate" pain from appearing), it works in every browser, even in crappy IE 5.0. The only not-so-optimal issue with it is that you need this empty document sitting on your server; without it, you couldn't access the document in the iframe due to cross-site scripting restrictions.
  
  Every serious JS developer MUST make his scripts working on IE6 as IE6 still has a big market share and will only slowly disappear. You can install all relevant IE versions i.e. using this: http://tredosoft.com/Multiple_IE , or using VMware.