Embedding & Styling XHTML YouTube Code
Tags: BeginnerJust 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.SonGodSuns – Minors Into Fire
Music video for SonGodSuns (2Mex of the Visionaries) directed by Gregory “G.Bone” Everett Ultra Wave Media.<!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 & 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!
Không có nhận xét nào:
Đăng nhận xét