Tutorials

Latest Word » Tutorials » Embedding & Styling XHTML YouTube Code
Embedding & Styling XHTML YouTube Code

Embedding & Styling XHTML YouTube Code

Tags:

Just recently I added a couple videos under the “Artist Spotlight” posts but ran into a few invalid XHTM errors. Not only did I get the errors but I also had to style the player with CSS. I’m sure some of you may have come across similar incidents, so I thought it may be helpful to share my solution.

Original YouTube Embed Code
This is what you will get from the embed code given by YouTube.

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/gtNlQodFMi8&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/gtNlQodFMi8&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

Which triggered these errors.

The Solution

My goal was to make the embed source valid XHTML and to allow easy styling with CSS.

Valid XHTML Youtube Embed Code

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/gtNlQodFMi8">
	<param name="movie" value="http://www.youtube.com/v/gtNlQodFMi8" />
</object>

*Note – All you have to do is change the video ID in two places. In this example, “gtNlQodFMi8″ is the video ID.

Styling YouTube Video with CSS

Now on top of the embed code validating in XHTML, I also wanted to add a light touch of styles to make it consistent with my layout (Center aligning, padding, and border).

Step 1.

Let’s add a class name “flashvideo” to the object.

XHTML

<object class="flashvideo" type="application/x-shockwave-flash" data="http://www.youtube.com/v/gtNlQodFMi8">
	<param name="movie" value="http://www.youtube.com/v/gtNlQodFMi8" />
</object>

Add the width and height properties to our new class. Note that we left the width to 100% to make it liquid.

CSS

object.flashvideo {
	width: 100%;
	height:350px;
}

Step 2.

Now we will wrap the flash object within another class, let’s call this “flashunit”.

XHTML

<div class="flashunit">
<object class="flashvideo" type="application/x-shockwave-flash" data="http://www.youtube.com/v/gtNlQodFMi8">
	<param name="movie" value="http://www.youtube.com/v/gtNlQodFMi8" />
</object>
</div>

This parent class is where we will add our center alignment, padding, border, and fixed width.

CSS

.flashunit {
	padding: 4px;
	background: #fff;
	border: 4px solid #ddd;
	margin: 10px auto;
	width: 575px;
}

Step 3.

We will now add the title of the video and a description for it.

XHTML

<div class="flashunit">
<h2><a href="http://www.youtube.com/watch?v=gtNlQodFMi8">SonGodSuns - Minors Into Fire</a></h2>
<object class="flashvideo" type="application/x-shockwave-flash" data="http://www.youtube.com/v/gtNlQodFMi8">
	<param name="movie" value="http://www.youtube.com/v/gtNlQodFMi8" />
</object>
<p>Music video for SonGodSuns (2Mex of the Visionaries) directed by Gregory "G.Bone" Everett Ultra Wave Media. </p>
</div>

CSS

.flashunit h2 {
	font: 18px normal Arial, Helvetica, sans-serif;
	border: 1px solid #ddd;
	background: #f0f0f0;
	margin: 0;
	padding: 10px;
	color: #111;
	text-align: center;
}
.flashunit p {
	font: 12px normal Arial, Helvetica, sans-serif;
	padding: 10px;
	margin: 0;
	border: 1px solid #ddd;
	background: #f0f0f0;
}

Final Output

The following video is what you will get at the end.

View Sample | Download Sample

SonGodSuns – Minors Into Fire

Music video for SonGodSuns (2Mex of the Visionaries) directed by Gregory “G.Bone” Everett Ultra Wave Media.

Complete Source 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=iso-8859-1" />
<title>Embedding &amp; Styling XHTML YouTube Code</title>

<style type="text/css">
.flashunit {
	padding: 4px;
	background: #fff;
	border: 4px solid #ddd;
	margin: 10px auto;
	width: 575px;
}
.flashunit h2 {
	font: 18px normal Arial, Helvetica, sans-serif;
	border: 1px solid #ddd;
	background: #f0f0f0;
	margin: 0;
	padding: 10px;
	color: #111;
	text-align: center;
}
.flashunit p {
	font: 12px normal Arial, Helvetica, sans-serif;
	padding: 10px;
	margin: 0;
	border: 1px solid #ddd;
	background: #f0f0f0;
}
object.flashvideo {
	width: 100%;
	height:350px;
}
</style>

</head>
<body>

<div class="flashunit">
<h2><a href="http://www.youtube.com/watch?v=gtNlQodFMi8">SonGodSuns - Minors Into Fire</a></h2>
<object class="flashvideo" type="application/x-shockwave-flash" data="http://www.youtube.com/v/gtNlQodFMi8">
	<param name="movie" value="http://www.youtube.com/v/gtNlQodFMi8" />
</object>
<p>Music video for SonGodSuns (2Mex of the Visionaries) directed by Gregory "G.Bone" Everett Ultra Wave Media. </p>
</div>

</body>
</html>

Hope this tutorial was helpful for some of you. Feel free to let me know if you have any questions or have any comments!

Related Posts

Author Bio

My name is Soh Tanaka and I am a Los Angeles based designer/front-end developer specializing in CSS driven web design with an emphasis on usability and search engine optimization. I also run a CSS Gallery which is updated daily with the best CSS websites from around the world. Come check it out!

You can learn more about me or Twitter  Follow me on twitter for more updates and resources!

Did You Enjoy This Post?

subscribe  Subscribe via RSS or by email to get all upcoming tutorials and articles delivered straight to you.

+ Add Comment37 Peeps Have Spoken Their Minds...

  1. Kelly

    I was trying to add class names to “embed” and that is probably why I was having issues with other browsers not behaving the same. I gave up on this already and left all my youtube videos how it came. Now I can clean them up, thanks!!

  2. Jin

    Good article. I recently wrote a blog on this topic as well I thought you may be interested. Although I didn’t touch up on the css part, just focusing on making it XHTML Strict compliant. One of my commenters linked a really good online tool for video code conversion too.

    http://www.8164.org/xhtml-strict/

  3. Omar

    Nice tutorial and cool vid too I also found this http://www.tools4noobs.com/online_tools/youtube_xhtml/ but it does not have the css tutorial. thanks

  4. David Thomas

    I wanted to add this code to blog posts. I put the css code on my theme style sheet, but the style didn’t pick up from the div and object class. Did I do something wrong? Or does this not work in blog posts?

    (I believe your sample complete code is html to create a web page, not for within the text of a blog post)

    I changed the object code back to one of the examples which includes the height and width in the code, but couldn’t figure out how to style it anymore than that.

    Thanks,
    David

  5. David Thomas

    What I am using now is

    When I used your examples, with style elements added to my style sheet, the video frame was tiny and had no border, in other words, did not pick up parameters from style sheet.

    thanks,
    david

  6. David Thomas

    <object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/keu2XUbSkws">
    <param value="http://www.youtube.com/v/keu2XUbSkws" name="movie">
    </param></object>

  7. Soh

    Hey David, it would be best if you could show me a link or example of what you are running into.

    It seems you may have some missing elements in the html or perhaps not calling the right class, or you may have some styles in your current theme that is conflicting with these styles.

    It you could just give me a link to what you are experiencing, I can definitely look into it for you.

    Thanks~

  8. ad

    Your Valid XHTML Youtube Embed Code is coming back as invalid for me?

  9. Soh

    Hey ad,

    Are you referring to the demo page?

    I just ran the xhtml validation and it came out fine for me:

    http://www.sohtanaka.com/web-design/examples/XHTML-youtube/index.htm

    http://validator.w3.org/

  10. ad

    ignore my earlier comment. seems to be working now. sorry!

  11. Soh

    No Worries! :-)

  12. ad

    thanks for this…very helpful.

    i wonder if there’s a way to turn off related videos. I’m guessing the “&rel=0″ parameter on the embed URL turns related vids off, but adding that to the end of the URL seems to be invalid.

  13. Soh

    I would check this for you, but YouTube is blocked at my work :-p

    I would assume &rel=0 would be invalid because of the ampersand.

    You can correct this by using ‘&amp;’ instead of just the ‘&’

  14. feha

    Hi Soh, thanks
    here is my contribution:
    http://www.vision.to/demo/youtube2xhtml.php

    I created a PHP function, that can be used in plugins for reapeted inluding tasks.
    I can be called from some bbcode parser then present the clean and valid XHTML.

    regards
    feha
    http://www.vision.to

  15. Soh

    Nice Feha! This is a great script, I will be using it :-) Thanks!

  16. feha

    You’r welcome :-)

  17. Danny

    I’m having a problem with it, it’s valid, but when I change it to my own youtube video it stops working :S could someone explain what it is I’m doing wrong?

  18. Danny

    Nevermind, I just got it haha. Thanks anyway, helped me out

  19. Daniel Matranga

    very useful, thanks!

  20. dawngordon36@hotmail.com

    it did not work on ning, because where do you put the url to the video?

  21. Soh

    Although I’m not familiar with ‘Ning’ but I would assume, all you have to do is change the URL from Youtube.com/video_ID to Ning.com/video_ID, and also I see tha they have an extra property of FlashVars=”" so be sure to add that in as well.

  22. Gean Paul

    Excelente post, Gracias…

  23. Feby

    Hi, now that YouTube Videos are always have & in their embeded code, like http://www.youtube.com/v/ese3zYZ-NA4&hl=en&fs=1&amp; and it is not valid by w3c, how can I fix this? Thanks b4

  24. Soh

    Just change the & to an “&amp;”

  25. Maja

    Thank you for this….It reaaaally really helped. Great thing that you do!!!! ;-)

  26. InforMedic

    Very nice – thanks for that valid code =)

  27. NotUrAvrgG33k

    could this be modified some how to fit the embedded video in the styling itself… similar as to like using the url for a bg image

  28. eastgirl

    How can I get text to wrap around the video? I’d like to add the video to a site so that it shows up on the left hand side of a paragraph. I tried align=left but that’s not working. Thanks for your help!

  29. angel

    I THINK I LOVE YOU !!

  30. angel

    OOPS….hit the ‘enter’ key too soon. see my creation at: http://www.angelpig.com/cityofneworleans2.html Superb!

  31. Mark

    Excellent. Thanks a million! That’s exactly what I was looking for.

  32. esther

    hi, i need your help.i am confused. i have this embed code below.

    but i do not know how to add it into my webpage. i don’t really know how to transform it into CSS style. please help. thank you.

  33. Alex

    Cheers man, that was the only format that worked for me to get a Youtube video embedded into my WordPress self-hosted blog. Really useful post.

  34. ranjit

    Useful post.. Thanks

  35. Greg

    I am having a problem aligning the youtube videos to the right, and having the text remain justified on the page. It always either separates the text, or floats above it.

    I have tried nearly everything, but nothing works in IE except for the float method. Any suggestions?

    As an example I want it to be like this:

    text text text text text text text text text text text
    text text text text text text text text text text text
    text text text text video video video video video
    text text text text video video video video video
    text text text text video video video video video
    text text text text video video video video video
    text text text text video video video video video
    text text text text video video video video video
    text text text text text text text text text text text
    text text text text text text text text text text text
    text text text text text text text text text.

  36. Ewout

    Thanks, works like a charm!

  37. Christa

    Great code. Thanks for the help. Exactly what I was looking for.

Speak Your Mind...

Post HTMLNeed to Post HTML Code? Use Postable to post code friendly html. *Wrap all html code in <pre></pre> tags.
Post HTMLNeed to Keep Updated with Comments? Subscribe to comments now.

CSS Gallery