We recently had a project wherein we needed to embed a collection of YouTube videos, but without the navigation bar. Now, with a little CSS this is very easy, but we also needed to allow visitors to pause, play and navigate the video when they moused over it…
Click to continue reading “css: hiding/showing the YouTube play/navigation bar on mouseover”
You may have seen our original article, entitled “html: embedding a YouTube video using xtml strict code,” which works just fine if you are looking to turn the default, unstyled code that YouTube gives you into XHTML strict code. But what happens if you want to embed your YouTube video with all the neat, customized styles that they allow you to configure before copying their code for use on another site? We’re glad you asked and you’re in luck, it’s still just as easy to validate.
Step 1: Get the code.
If you have ever tried to embed a YouTube video before, you know it’s pretty easy. Simply find the video you like, look to the right under the “Embed” section, and get your code. In this case, we’re covering how to embed your video with styles intact, so you’ll also want to press the “Customize” button and make your video stand out. Here’s our example, taken straight from the YouTube web site.
Example YouTube Code.<object width="425" height="373"><param name="movie" value="http://www.youtube.com/v/ERuMIlyzWBA&hl=en&
color1=0xe1600f&color2=0xfebd01&border=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/ERuMIlyzWBA&hl=en&color1=
0xe1600f&color2=0xfebd01&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed></object>
As in our first article, this code will work, but will throw a myriad of unnecessary errors. It’s also a lot more code than necessary. So, how do we fix it? Let’s start by giving you the correct code, then moving in to what you’ll need to do to make it work for your video.
Validated YouTube Code<object type="application/x-shockwave-flash" width="425" height="373" data="http://www.youtube.com/v/ERuMIlyzWBA&hl=en
&color1=0xe1600f&color2=0xfebd01&border=1">
<param name="movie" value="http://www.youtube.com/v/ERuMIlyzWBA&hl=en
&color1=0xe1600f&color2=0xfebd01&border=1" /></object>
This will work just as well as what YouTube provides, but with less code and with no validation errors. To make this code work for your video, here’s what you’ll do:
1. Modify new code example to include your particular YouTube video width and height.
2. Modify the data=”" and value=”" variables to include your YouTube link, maintaining the additional variables (in this case the full string is http://www.youtube.com/v/ERuMIlyzWBA&hl=en&
color1=0xe1600f&color2=0xfebd01&border=1).
3. Replace all bare ampersand (&) symbols in the data and value strings with &. The end result will look like this:
http://www.youtube.com/v/ERuMIlyzWBA&hl=en&
color1=0xe1600f&color2=0xfebd01&border=1
That’s it! Just a touch more work than validating a standard (unstyled) YouTube video, but certainly nothing to lose any sleep over.
See the end result in action!
Missed our first article? You can find that here. Interested in learning more about how to utilize YouTube in your business? Then you’ll love another one of our articles entitled A quick look: YouTube and what it could mean for your business
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
Thanks for reading! If you found one of our articles helpful, we would love to hear about it. Leave us a comment or send us an e-mail.
If you’ve ever tried to add a YouTube video to your web site, you’ve probably found that it’s not too hard to do. But adding one that validates as XHTML Strict is just a little bit tougher. Let’s go step by step.
Step 1: Get the code.
YouTube has a very convenient “Embed” section on every video they host, which allows you to very easily get the code you need to post a video on your web site or blog. Unfortunately, the code they give you will throw XHTML validation errors.
Example YouTube Code:<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Pk7yqlTMvp8&rel=1"> </param><param name="wmode" value="transparent"> </param><embed src="http://www.youtube.com/v/Pk7yqlTMvp8&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
This code will work, but it will throw 15 errors (see our example page for a full list of errors). Now, how do we remedy this? Very simply.
Our Example Code:<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/Pk7yqlTMvp8"><param name="movie" value="http://www.youtube.com/v/Pk7yqlTMvp8" /></object>
This will work just as well as what YouTube provides, but with less code and with no validation errors. To make this code work for your video, simply replace the “Pk7yqlTMvp8″ in the code with the one provided by YouTube.
See it in action!
Want to see more about how we did this? Simply check out our example page! If you are interested in learning more about how to utilize YouTube in your business, please take a look at our sister article entitled A quick look: YouTube and what it could mean for your business
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!
