YouTube Movies and Valid (X)HTML – Part 3 of 3

June 18th, 2008 Becky Peters

This is the final entry in a series of 3 articles designed to help you embed a YouTube movie while maintaining (X)HTML standards compliance, then customizing the display of the movie and finally, providing alternate content for visitors unable to view the movie. This article is a reprint of the series first published on stylehack.com.

In this article we’ll add alternate content to the code that was modified in the first two articles. The purpose of providing alternate content is to allow for accessibility and/or for visitors whose browser is not configured to display a movie.

What is Alternate Content?

Alternate content is simply text or other content (for instance, an image) provided as an alternate representation of the object embedded within the page.

  1. It is placed between the <object> </object> tag set, after any <param> elements and before the </object> tag.
  2. There is no tag set or attribute label related to this content, it is placed directing into the <object> tag set just like placing content in a <p> tag set!
  3. The alternate content is what will be displayed in the browser when your visitor does not have the capability to view the object being called by the <object> element.

You can use an image, add a link, even use other elements in the alternate content… anything that is valid under (X)HTML coding guidelines. It’s actually a nice touch to use all of the above – an image, a link and text – for maximum accessibility.

Read the rest of this article »

Posted in (X)HTML Tricks & Tips, Validation Tips | No Comments »

YouTube Movies and Valid (X)HTML – Part 2 of 3

June 11th, 2008 Becky Peters

This is the second in a series of 3 articles designed to help you embed a YouTube movie while maintaining (X)HTML standards compliance, then customizing the display of the movie and finally, providing alternate content for visitors unable to view the movie. This article is a reprint of the series first published on stylehack.com.

In this article we’ll apply all that you learned in the first article to embed a movie, this time with code that has been modified using the customization option(s) available on YouTube.

Customization Options via YouTube

If you recall from the first article in this series, when you are on the movie’s YouTube page you have two options for obtaining embedding code — to simply grab the embedding code for the default player (addressed in Part 1 of this series), or to customize the player before you grab the embedding code. Let’s grab some customized code and convert it to valid XHTML code.

Read the rest of this article »

Posted in (X)HTML Tricks & Tips, Validation Tips | No Comments »

YouTube Movies and Valid (X)HTML – Part 1 of 3

June 4th, 2008 Becky Peters

This is the first of a series of 3 articles designed to help you embed a YouTube movie while maintaining (X)HTML standards compliance, then customizing the display of the movie and finally, providing alternate content for visitors unable to view the movie. This article is a reprint of the series first published on stylehack.com.

Web 2.0 is in full swing (cough cough) and with it come many opportunities to display someone else’s content in our sites or blogs. And most of those opportunies even offer us the code necessary to do so. However, as is typical with much that you find on the web, the code provided by the object’s author is rarely 100% (X)HTML standards compliant.

Most of the code you find out on the web uses the <embed> element, which is deprecated in (X)HTML. So we need to be able to replace that element and its attributes with the appropriate <object> and <param> elements.

How is that accomplished? The short answer is by moving some (or all) of the <embed> attributes to the <object> and <param> elements! Let’s see how that works by concentrating on how to make the code to embed a YouTube movie standards compliant.

Getting the Code to Insert a YouTube Movie

The code for embedding a movie is different from the code used on YouTube pages and from the code that you receive in email when someone uses the “Email this movie” functon. So where do you get the code sample you need to embed a YouTube movie?

The best place is directly from YouTube, of course! However you come across the movie — whether embedded in a web page, sent to you as a link in email, via Google’s video search feature, or by simply visiting and browsing the YouTube site — you should always follow that movie to its official page on the YouTube site.

Read the rest of this article »

Posted in (X)HTML Tricks & Tips, Validation Tips | 3 Comments »

Validating XHTML with Javascript

May 13th, 2008 Becky Peters

One of the challenges we face when creating and maintaining a standards-compliant XHTML site comes when adding a snippet of code, or including a larger piece of code, written in Javascript and authored by someone else. Why can that pose a challenge? If the code is older or the author is not concerned with XHTML coding standards the code may contain something that causes the validator to throw an error, or it may generate XHTML code that is not in compliance with current standards.

Inquiring minds might pipe up and mention at this point that “in the good old’ days the validator didn’t parse Javascript!” So what’s changed?

In the old days anything between <script></script> was considered CDATA (character data) and ignored by the markup validator. In the here and now it’s considered PCDATA (parsed character data) and it gets parsed! So what’s an intrepid standards-compliant coder to do?

Cleaning up snippets of JS inserted into your page code

A common reason that a web page might be found invalid by the markup validator is due to inserting an older snippet of JS related to some type of interactivity into the page. For instance, adding an onClick event handler:

<a HREF="yourlink.html" onClick="something here">Your Link</a>

This is a no brainer, right? No one can trick you… you know that A HREF is going to be a problem. No Capitalization of Elements is allowed in XHTML! So you fix that:

<a href="yourlink.html" onClick = "something here">Your Link</a>
Read the rest of this article »

Posted in (X)HTML Tricks & Tips, CSS Tricks & Tips, Javascript Snippets & Help, Validation Tips | 2 Comments »