User login

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&amp;hl=en_US&amp;fs=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" />
    <embed width="384" height="313" src="http://www.youtube.com/v/LU8DDYz68kM&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true">
    </embed>
</object>

Here is the test results from validator.w3.org

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>

Now this is Valid XHTML

Posted under:

css
html

Comments on this post

Post new comment

Search

Custom Services

If you are looking a Drupal theme or project developer, feel free to contact me.

Articles

Recent Free Themes

Admire Grunge - A grunge drupal theme
Another high quality free Drupal theme contributed to Drupal community.
Crusti - Drupal theme with color module support
After a long gap, I am back with a new free theme for Drupal. This theme is designed in a way that will suit most type of websites.
Addari - A Drupal theme by Worthapost
Addari has been release for Drupal 5.x and 6.x. Actully this theme was released on...
Web 2.0 drupal theme Admire Gray
This is the release of my new Drupal theme in Admire series. This design is based on ...
New clean n clean wordpress theme release
It’s time to release a new free theme Clean n Clear. Do you know what kind of theme I love?

Modify node submitted information, remove author name from post information.
In this article I am going to show you how to modify Drupal submitted information by editing your template.php
How to include jQuery to your website from Google
There are several benefits of including jQuery from Google's server
Pure CSS rounded corners without images and javascript
In this article I will show you how to make a rounded corner boxes without using images or javascript.
How to see available template variables in Drupal
Simple use it in your template file in which you want to see variables.
How to make youtube embed code XHTML valid
Recently I put youtube's embed video code on one of my website and tried check it on

Themes