Posts Tagged ‘validation’

html: embedding a YouTube video WITH STYLES using xhtml strict code

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&amp;hl=en
&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;border=1">
<param name="movie" value="http://www.youtube.com/v/ERuMIlyzWBA&amp;hl=en
&amp;color1=0xe1600f&amp;color2=0xfebd01&amp;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 &amp;. The end result will look like this:

color1=0xe1600f&amp;color2=0xfebd01&amp;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.

html: resolving simple xhtml errors

Validation errors are most simply defined as inconsistencies between your web site code and the accepted standards (which will vary depending on your doctype declaration), and can have a negative impact on:

  1. Your search engine rankings
    For example, a lack of alternate tags on your images could cost you in search engines, not to mention make your site hard on visitors with disabilities.
  2. The way your site appears across multiple browsers
    Think Internet Explorer verses Firefox or Safari. Each can sometimes interpret site code a little differently, especially when that code is poorly formed and tested.
  3. The time it takes your web site to load
    Some errors may cause the site to take longer to load, as your browser works to resolve duplicate commands and inconsistencies.

If you haven’t taken a look at how your site stacks up, now would be a great time to do so. You can use this link. To make the check as useful as it can be, we’d suggest selecting the “More Options” link and choosing either “XHTML 1.0 Transitional” or “XHTML 1.0 Strict.”

Now, to make life easier on both you and us, we have created a page that outlines some common issues and how to correct them, in a greater detail than within this article. You can find that page right here. Each of three common errors are explained in detail on that page. Briefly, here they are:

  1. Images without alternate tags
    Alternate tags are quick, relevant descriptions used to tell search engines and web browsers what an image on your web site is. Think of Google sort of like a blind man. He can’t see pictures, but can read the “braille” (alternate tags) that tell him what your images are showing. If you leave this out, you’ll get more than a validation error, you’ll also miss out on a simple way to make your web site more efficient in search engines.
  2. Those pesky ampersands (&)
    Ampersands are typically used to declare special characters. For instance, typing “™” will create this: ™, while “©” will provide this symbol: ©. The problem comes when an ampersand is used by itself, rather than in defining a character. This is a no no, and will cause validation errors on your web site. Luckily, these errors are easy to fix by replacing your naked “&” symbols with “&” instead (just don’t add the quotes when you type it!).
  3. Unclosed tags
    This one is also easy to fix, and can cut your error count drastically. If you are copying code from another tutorial, or writing it on your own, be very aware where you need to close your tags, and how. For instance, when writing a paragraph, you will need to start with a <p> tag, and end with a </p> tag. For an image, you will need to end the image with an ending slash, like this: <img src=”images/an-image.gif” />

Of course, this is just a very small and simple list of some of the errors we see most often, and ones which are easy to repair. Want to know more about an error we didn’t mention? There are tons out there. Just leave a comment and we’d be happy to lend a hand.

Got a record number of errors on your site? We want to hear what you’ve got, and whether you’ve nailed them all. Believe it or not, the most errors we have ever seen on a site is a whopping 4,803. No, we won’t tell who it was.

Compatibility:
These methods are both simple and good practice for every web site. While this list is certainly not intended to provide a “how-to” for fixing every validation error on your web site, it will hopefully inspire you to check your current code, and to possibly write just a little bit cleaner the next time around. We all have to start somewhere, right?

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!

html: embedding a YouTube video using xtml strict code

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!






DynamiX Web Design

DynamiX Labs is Copyright © 2014 DynamiX Web Design, LLC.
DynamiX Labs is proudly powered by WordPress

Entries & Comments.  |  thanks & about.


The DynamiX Mascot button submit it! Background
hire dynamix!