Video Microdata

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

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/"
PropertyDescription
media:videorequired
media:thumbnailrequired
dc:license
dc:description
media:title
media:width
media:height
media:type
media:region
media:duration
Examples
Embedded YouTube video without microdata
(see <iframe> Embedded YouTube video)

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>
Embedded YouTube video with microdata
(see Embedded YouTube video demo above)

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>

Valid HTML 5