Video Microdata

Note: For the following example to work in HTML 5 without Flash, you must "Join the HTML5 Trial" at http://www.YouTube.com/html5.

This is an actual working example of the Embedded YouTube Video example code below.

Syntax

Namespaces for Video Microdata

• xmlns:media="http://search.yahoo.com/searchmonkey/media/"
• xmlns:dc="http://purl.org/dc/terms/"

Examples

Start with the code to embed a YouTube video, which is this simple:

<iframe class="youtube-player" width="640" height="480"
   src="http://www.YouTube.com/embed/GGT8ZCTBoBA"></iframe>

The content model of the <iframe> tag is empty, the microdata properties cannot be put inside the iframe element. Therefore, a span element is added to hold the iframe element and the microdata properties.

<span itemscope="itemscope"
   xmlns:media="http://search.yahoo.com/searchmonkey/media/"
   xmlns:dc="http://purl.org/dc/terms/">
   <iframe class="youtube-player" width="640" height="480"
      src="http://www.YouTube.com/embed/GGT8ZCTBoBA"
   ></iframe>
   <link itemprop="media:video" rel="alternate" href="http://www.YouTube.com/watch?v=GGT8ZCTBoBA"/>
   <link itemprop="media:thumbnail" rel="icon" href="http://i.ytimg.com/vi/GGT8ZCTBoBA/hqdefault.jpg"/>
   <link itemprop="media:thumbnail" rel="icon" href="http://i.ytimg.com/vi/GGT8ZCTBoBA/default.jpg"/>
   <link itemprop="dc:license" rel="license" href="http://www.ExampleOnly.com/license.html"/>
   <meta itemprop="dc:description" content="YouTube Mobile gets a kick start! The new YouTube mobile website (m.youtube.com) offers a number of enhancements including: - It's really fast ..."/>
   <meta itemprop="media:title" content="Introducing the New YouTube Mobile Website"/>
   <meta itemprop="media:width" content="640"/>
   <meta itemprop="media:height" content="385"/>
   <meta itemprop="media:type" content="video/webm"/>
   <meta itemprop="media:duration" content="85"/>
</span>