Get rid of those YouTube EMBED tags
Unfortunately, there is not a good way to explain this problem without having this page generate an error in the W3C HTML validator. If you are a web standards advocate, as I am, you realize the distaste of purposefully creating a page that does not validate. Though this page is not valid XHTML, I present an evidence-based, cross-browser compatible method for embedding YouTube videos in this article.
I recently made a short video and uploaded it to YouTube for all to see. The video was made using GtkRecordMyDesktop on my PC, which is running Ubuntu Linux 8.04 with Compiz desktop effects enabled.
YouTube video with EMBED tag
The problem with YouTube is in the way that they have you embed the videos within a web page. This video is placed into the page using their default HTML code. The problem with this code is that it uses the EMBED tag. Why is this a bad thing? Well, I guess it’s because that tag is not valid for XHTML. The OBJECT tag is used to place multimedia objects within a web page when you are using XHTML. The EMBED tag was used in HTML 4.01, but has been deprecated in later revisions to the standards.
YouTube does use the OBJECT tag, but contained within that tag is an EMBED tag, invalidating the XHTML. Here is the standard code given by YouTube:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
</object>
And here is the resulting video within the page:
YouTube video with OBJECT tag
The code which I have used below to put the video into the page is slightly different, in that it does not use the EMBED tag. It eliminates the EMBED by moving the required attributes to the OBJECT tag. One attribute, SRC, must be replaced by the DATA attribute containing the same information. The valid XHTML used on this page for the second embedded video is this:
<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/pV4n1UiyRKo&hl=en&fs=1" />
<param name="allowFullScreen" value="true" />
</object>
And the result of using this code looks like this:
Attention! Keep in mind that the code which YouTube gives at the end of the video to use to embed the video into another page is their original, non-valid code.
Which works best? After testing in various browsers on differing operating systems, both are just as functional, but only the modified code validates as proper XHTML. As an added bonus, the valid XHTML uses fewer bytes of space in the file. Why not make your embedded YouTube videos valid too?
Danger sign image courtesy takomabibelot by Attribution License.
October 5th, 2008 at 8:01 pm
[...] Get rid of those YouTube EMBED tags | Dexterity Unlimited – Articles [...]
October 7th, 2008 at 5:25 pm
[...] Get rid of those YouTube EMBED tags [...]
October 8th, 2008 at 5:11 am
I agree completely with your observation that EMBED is not part of either the HTML 4.01 or XHTML 1.0 standard. However (and as far as I am aware), user testing has shown that EMBED is currently the most accessible way of presenting certain multimedia objects – including videos. as such, I believe its usage can be considered if it is in the best interest of accessibility or usability. YouTube isn’t, itself, the best example of presenting videos in an accessible manner but, outside of YouTube, I think developers need to be aware that, in this particular situation, following standards blindly may not be best option.
Have you tested your solution for access via keyboard? Or screen reader software?
Just a thought…
October 8th, 2008 at 5:39 am
So what?
Who uses XHTML anyway? EMBED is valid in HTML, and will continue to be valid for a very long time.
October 8th, 2008 at 7:48 am
Dave said:
Actually, the
EMBEDtag has never been a part of the HTML specifications, whether HTML 4.01 or XHTML. It is proposed as part of the HTML 5 specs, but I don’t even want to think about getting into that mess.October 8th, 2008 at 8:19 am
Mel:
Great questions regarding the accessibility of the multimedia objects. I’ve found several resources for information about this, but most of it seems to be at least a couple years old. One of the better is the cached version of a Macromedia Accessibility Blog which tests several embedded object techniques on a variety of browsers (including Firefox 1.0.4, JAWS 6.20.065, etc.). Perhaps this issue needs to be revisited with additional testing accross platforms/browsers/techniques. There is a good article on Accessible Flash techniques at WebAIM.
What about the accessibility of YouTube’s Flash object itself? Posting cross-site objects can be very problematic for accessibility. I think hosting the video on your own site gives you the most control, but how many of us can afford the bandwidth associated with that?
October 8th, 2008 at 4:57 pm
Have you tested the valid code with various feed readers and additional sites such as Myspace, forums etc?
October 9th, 2008 at 4:47 pm
Andy Beard said:
Do you mean displaying the video within the feed reader? I suppose it depends on the multimedia functions built into the reader. I’m using Opera for reading my feeds, so there’s no problem there. I think perhaps we should test this.
The code was a bit difficult to get to render properly in WordPress: I ended up making the post nearly all one single line of text in order to get the formatting to stay the way I wanted.
Myspace videos seem to use nearly the same code in their videos. I haven’t tested one yet.
November 20th, 2008 at 6:33 am
TO be very true, A large part of our sites is not valid and up to mark according Xhtml. I have to go through the similar situation regarding meta tags of a site and owner of the site was using everything invalid. It is very difficult to convince someone that he/she is not using the right code or stuff according to standards. Anyhow thanks for sharing the tip.
November 28th, 2008 at 1:49 am
I used your code on a bunch of videos on my site. I added rel=o at the end of the line, for instance, http://www.youtube.com/v/XevObuXbOMg&hl=en&fs=1&rel=0.
Usually when you add this it stops you tube displaying a slide show of other related videos (just get a replay button)
When I did it with your code it made it much worse, now I get a search box, the embed code, the url as well as the wretched slide show.
Any suggestions before I delete the lot and go back to non standard tags?
November 28th, 2008 at 11:28 am
Kim said:
This is an interesting problem. The YouTube Embedded Player Parameters seem like a good place to start. It isn’t clear to me yet whether YouTube is pulling the parameters from the full URL provided in the
movieparameter, or from thedataattribute in theobjecttag.Perhaps a good way to try this out would be to leave off everything after the question mark in the URLs, and provide the parameters you want in the
paramtags within theobjectcontainer, like this:<param name="rel" value=”false” />YouTube indicates using both of these techniques at the same time, so adding the
rel=0to the URL and providing theparamtag should solve your immediate problem. Please let me know if this works. It’s interesting to see what we are or are not able to do with YouTube.On a side note, I’ve also experimented with Flowplayer, an embedded flash video player that allows you to host your own FLV videos on your site and display them as you wish. This might be a good alternative if you don’t have a problem with the amount of bandwidth you could use, or you have videos that you for one reason or another can’t have on YouTube.
November 28th, 2008 at 2:52 pm
Increase YouTube Views said:
Yes, I’ve definitely found this to be difficult. Fortunately, things have been changing. Unfortunatly, the changes are very slow.
One change that I was very glad to see was the adoption of the Illinois Information Technology Accessibility Act (IITAA). This law requires state agencies and universities to ensure that their web sites, systems, and other information technologies are accessible to people with disabilities. In the state’s guidelines for web sites’ compliance with this law is a section that I truly appreciate:
December 30th, 2008 at 11:31 am
Thank you for telling about Flowplayer, I was looking for such service for a long time!
One more problem with YouTube is that they force people to delete their good videos…
February 12th, 2009 at 7:02 am
Maybe it is just me, but if both tags works equally well, what is the point of changing it ?
February 23rd, 2009 at 9:08 pm
Peter, I think you should read the post two before yours. It could also be particularly important if you are promoting yourself as delivering valid code BUT because of youtube you actually aren’t.
Also I found this page very handy when the W3C Validator wouldn’t validate my page in HTML 4.01 Trans.
Thanks
February 27th, 2009 at 9:12 am
Why do the examples look exactly same to me? I don’t think thats a big problem. Because websites should be designed for humans instead of robots, spiders and engines. Keep this in mind next time.
February 27th, 2009 at 6:40 pm
Hi Maria,
As Anonymous mentioned above, this is important in order to deliver code that meets W3C standards. If you deliver your pages as XHTML, YouTube’s code does not meet those standards.
Yes, the functionality of a web page should be designed for human beings. But the code behind that functionality should be (in many people’s opinion) presented in a manner that meets current standards. Yes, the two examples look the same, and currently should operate the same in the current generation of web browsers.
The
embedtag has never been a part of the HTML standards, although it is proposed for HTML 5. Accordingly, a future web browser that supports XHTML 1.0 standards fully does not have to understand what that tag is, and can ignore it completely if it is presented in a page declared to be XHTML 1.0. Theobjecttag is the standards-compliant tag used to place media not covered by other tags within a web page.March 1st, 2009 at 12:13 am
I am a newbie as far as html code is concerned. Will this embedding of you tube video expose my site to any security risk?
March 1st, 2009 at 12:48 pm
The methods used to place the YouTube content on a page on your own site should not expose your site to any particular risks. Basically you are telling the browser to place a block of special content in that position and to grab that content from a particular place on YouTube’s servers.
Granted, it might be possible to do some nasty browser manipulation in this way if, in fact, YouTube were not an honorable company allowing people to specifically do just that. But considering their track record thus far, I’m sure YouTube is a very safe source for multimedia content.
March 2nd, 2009 at 4:05 am
I also use parameter &ap=%2526fmt%3D18 to have google’s high quality video embedded instead of default quality
April 8th, 2009 at 7:49 am
@Tom
Thanks for the heads up on the google video. I changed it on both the sites where I have video, it definately makes a difference.
May 14th, 2009 at 1:56 am
Perhaps a good way to try this out would be to leave off everything after the question mark in the URLs, and provide the parameters you want in the param tags within the object container the functionality of a web page should be designed for human beings. But the code behind that functionality should be (in many people’s opinion) presented in a manner that meets current standards..Really i am impressed from this post….the person who create this post it was a great human..thanks for shared this with us.i found this informative and interesting blog so i think so its very useful and knowledge able.I would like to thank you for the efforts you have made in writing this article.
May 18th, 2009 at 1:41 am
It is very difficult to convince someone that he/she is not using the right code or stuff according to standards.It could also be particularly important if you are promoting yourself as delivering valid code BUT because of you tube you actually aren’t. Basically you are telling the browser to place a block of special content in that position and to grab that content from a particular place on You Tube servers.
June 19th, 2009 at 10:27 pm
Why was the embed tag deprecated? Personally, i try to make things compliant for the purposes of page design (ie easier to bug check) but i dont get too held up on making sure its compliant 100%. I always go for transitional xhtml and just make sure its consistent cross-browser. The codes needed to publish swfs are now more complicated (but still qute easy!) with these changes, so i assume there was a good reason for taking embed from xhtml.
I do respect you for targeting 100% compliance, but i just dont find it realistic on the sites that i work on, with 3rd party editors, etc…