Sign In/My Account | View Cart  

advertisement

AddThis Social Bookmark Button

Article:
  Hi-Res YouTube Hacks
Subject:   Browser Compatibility
Date:   2008-05-14 06:26:24
From:   bhurst
Response to: Browser Compatibility

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
Full Threads Oldest First

Showing messages 1 through 6 of 6.

  • David Battino photo Browser Compatibility
    2008-05-14 10:05:57  David Battino | O'Reilly Blogger [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>

      • David Battino photo Browser Compatibility
        2008-05-15 10:13:45  David Battino | O'Reilly Blogger [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.