How to make youtube embed code XHTML valid
Wed, 02/03/2010 - 03:46
Recently I put youtube's embed video code on one of my website and tried check it on XHTML validator, I got some errors related to youtube code and my webpage became invalid. So here I found a way to make it valid with the help of css.
This is the code that youtube.com gives you:<object width="384" height="313"> <param name="movie" value="http://www.youtube.com/v/LU8DDYz68kM&hl=en_US&fs=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /> <embed width="384" height="313" src="http://www.youtube.com/v/LU8DDYz68kM&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
The Solution:
We will do the following:- Remove bad codes from the original code.
- Wrap the content with a div.
- Styling with CSS.
Remove width and height attribute from «object». Remove other «param» tags except the one shown below. Also remove any extention from video URL like I have done.
Valid code:<div class="YTvideos"> <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/LU8DDYz68kM"> <param name="movie" value="http://www.youtube.com/v/LU8DDYz68kM" /> </object> </div>
Styling
.YTvideos object{ /* You can set it custom */ width:384px; height:313px; }
Final html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>YT test</title> <style type="text/css"> .YTvideos object { /* You can set it custom */ width: 384px; height: 313px; } </style> </head> <body> <div class="YTvideos"> <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/LU8DDYz68kM"> <param name="movie" value="http://www.youtube.com/v/LU8DDYz68kM" /> </object> </div> </body> </html>
