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/"
Property | Description | |
---|---|---|
media:video | required | |
media:thumbnail | required | |
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>