Youtube

Youtube Logo

Internet Explorer IE compatibility issues when embeding Youtube videos into WordPress

A week ago I inserted some Youtube videos into my blog posts and only a few days later did I notice that the videos were not displaying in Internet Explorer (IE). No problems in Firefox and Opera but once again, Internet Explorer did not understand the code as the other browsers would. So annoying! Can’t wait for the day all browsers respect the W3C standards!

Youtube gives you a standard code to embed the video into your wordpress blog posts which looks like this :


<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/Pc4Q63hrCTA&
color1=0x2b405b&color2=0x6b8ab6"></param>
<param name="wmode" value="transparent"></param>
<embed src="https://www.youtube.com/v/Pc4Q63hrCTA&
color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>

The code above in WordPress will not work for Internet Explorer 6 & 7 (IE). IE has problems with the <object> tag.

Solution –>

To make the Youtube embeding code compatible with all browsers, all you need to do is keep the <embed> tag part of the Youtube embed code :


<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/Pc4Q63hrCTA&
color1=0x2b405b&color2=0x6b8ab6"></param>
<param name="wmode" value="transparent"></param>
<embed src="https://www.youtube.com/v/Pc4Q63hrCTA&
color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>

The final working Youtube embed code is :

<embed src="https://www.youtube.com/v/Pc4Q63hrCTA&
color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>

WARNING :: With the code above, the users will have to click twice on the play button to launch the video (only in IE). This is annoying but I have not found a solution and I believe most people would try clicking a second time thinking they hadn’t clicked properly the first time.

You can check in Firefox, Internet Explorer and other browsers how the code above works in wordpress by checking at the bottom of this post for the Youtube video.

Extra links about embeding Youtube videos in WordPress posts:

East Woods Hao :: NY Joomla :: Master New Media :: BSSD

Related Images: