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