If you find this helpful, please click the Google 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.) |
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>