none
Embeding youtube videos with an iframe doesn't work in IE9 RRS feed

  • Question

  • Hello.

    I have exactly the same problem as mentioned here - http://social.technet.microsoft.com/Forums/en/ieitprocurrentver/thread/d1ce4d8b-aab7-4742-b41a-30d2df85fc42:

    "I'm having problems with embedding youtube videos within an iframe. The problem occures when I use IE9 rendering engine and so Youtube attemps to check for supported codes. JScript engine throws "Not implemented" on "canPlayType" method of a video element (check it out in debug mode)."

    Here is my test code:

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Test iframe</title>
    </head>
    <body>
        <iframe src="http://www.youtube.com/embed/atQvmFJZVpo" frameborder="0" width="425" height="350"></iframe>
    </body>
    </html>

    When I debug it, I can set Document Mode to IE8 and it works, but in IE9 mode it doesn't. I use iframe in test code, because I use TinyMCE in my project (latest version TinyMCE has this problem). Should I modify something or this code can't work in IE9? I tried both IE9 32bit and IE9 64bit.

    Thank you.

    Valya


    Friday, July 27, 2012 3:59 PM

Answers

  • Hi,

    works fine for me. Win7, IE9 x86

    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Youtube iframe</title>
    </head>
    
    <body>
        <iframe src="http://www.youtube.com/embed/atQvmFJZVpo" frameborder="0" width="425" height="350"></iframe>
    </body>
    
    </html>
    

    1. validate and correct markup errors. (missing content-type meta)

    2. disable Flash cookies... Start>Control Panel>Flash (32bit) (probably the reason why I have no problems)

    3. reset IE Security zone settings (click "Reset all zones to default" on security tab of Internet Options)... remove youtube.com and google.com from your Trusted sites list. ensure "Inlude updated website lists from Microsoft" is checked. (compatibility view settings).. Default cookie settings (Default button on Privacy tab).

    4. Test in noAddons mode (ensure no running google services are running in tasksmanager (googletoolbarupdater(x86, x64).exe)) and that the mapped security zone is the Internet Zone (File>Properties)

    can you provide a publicly accessible link to your website... we need to inspect your server response headers.

    can you provide a screen shot? (you can upload images to this forum )


    Rob^_^

    Friday, July 27, 2012 8:19 PM
  • Thank you for answer. I used Windows Server 2008 (virtual machine) for tests so my settings were different a bit. I saw black rectangle on that machine. Today I asked my colleague with Win7, IE9 and test page works fine now - I see video. But my initial problem was with hide/show div with iframe. This code is not works on IE9 (Win7) - "Test text in div with video" can be hidden, but iframe can't. But we found solution - if we use function 'toogle' (not toogleClass), it works.

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Test iframe</title>
        <style type="text/css">
            .hidden {display: none;}
        </style>
        <script type="text/javascript"  src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#controller").click(function() {
                    $("#myvideo").toggleClass("hidden");
                });
            });
        </script>
    </head>
    <body>
    <p>When you click <span id="controller" style="color:red">here</span> we try to hide/show div with video</p>
    <div id="myvideo">
        <br/>
        Test text in div with video<br/>
        <iframe src="http://www.youtube.com/embed/atQvmFJZVpo" frameborder="0" width="425" height="350"></iframe>
    </div>
    </body>
    </html>

    • Marked as answer by Allen Li - MSFTModerator Thursday, August 2, 2012 3:00 AM
    • Unmarked as answer by v4umak Friday, August 3, 2012 11:56 AM
    • Marked as answer by v4umak Friday, August 3, 2012 11:57 AM
    Monday, July 30, 2012 3:15 PM

All replies

  • Hi,

    works fine for me. Win7, IE9 x86

    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Youtube iframe</title>
    </head>
    
    <body>
        <iframe src="http://www.youtube.com/embed/atQvmFJZVpo" frameborder="0" width="425" height="350"></iframe>
    </body>
    
    </html>
    

    1. validate and correct markup errors. (missing content-type meta)

    2. disable Flash cookies... Start>Control Panel>Flash (32bit) (probably the reason why I have no problems)

    3. reset IE Security zone settings (click "Reset all zones to default" on security tab of Internet Options)... remove youtube.com and google.com from your Trusted sites list. ensure "Inlude updated website lists from Microsoft" is checked. (compatibility view settings).. Default cookie settings (Default button on Privacy tab).

    4. Test in noAddons mode (ensure no running google services are running in tasksmanager (googletoolbarupdater(x86, x64).exe)) and that the mapped security zone is the Internet Zone (File>Properties)

    can you provide a publicly accessible link to your website... we need to inspect your server response headers.

    can you provide a screen shot? (you can upload images to this forum )


    Rob^_^

    Friday, July 27, 2012 8:19 PM
  • Thank you for answer. I used Windows Server 2008 (virtual machine) for tests so my settings were different a bit. I saw black rectangle on that machine. Today I asked my colleague with Win7, IE9 and test page works fine now - I see video. But my initial problem was with hide/show div with iframe. This code is not works on IE9 (Win7) - "Test text in div with video" can be hidden, but iframe can't. But we found solution - if we use function 'toogle' (not toogleClass), it works.

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Test iframe</title>
        <style type="text/css">
            .hidden {display: none;}
        </style>
        <script type="text/javascript"  src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#controller").click(function() {
                    $("#myvideo").toggleClass("hidden");
                });
            });
        </script>
    </head>
    <body>
    <p>When you click <span id="controller" style="color:red">here</span> we try to hide/show div with video</p>
    <div id="myvideo">
        <br/>
        Test text in div with video<br/>
        <iframe src="http://www.youtube.com/embed/atQvmFJZVpo" frameborder="0" width="425" height="350"></iframe>
    </div>
    </body>
    </html>

    • Marked as answer by Allen Li - MSFTModerator Thursday, August 2, 2012 3:00 AM
    • Unmarked as answer by v4umak Friday, August 3, 2012 11:56 AM
    • Marked as answer by v4umak Friday, August 3, 2012 11:57 AM
    Monday, July 30, 2012 3:15 PM
  • Could you explain, why toggleClass does not work in code from previous comment?
    Friday, August 3, 2012 12:00 PM