embed-brainstorming

Editor

Ben Ward

Synopsis

Embedding content across different publishers — such as showing YouTube videos in blog posts, Flickr photographs in Pownce, preview images next to bookmarked links.

Sites such as YouTube, Flickr, Vimeo and others publish ‘embed code’ to aid users in copy+pasting content into their own repostings. This is especially useful for embedding of complex content such as Shockwave Flash movies, where the HTML code is not intuitive. Sites like Flickr use copy+paste code examples to encourage and enforce link-back policies and publication of author, publisher and copyright information.

Goal

Produce a microformat to describe the embedding patterns for content and the author/publisher information connected to the content, such that a user or tool could extract the ‘embed’ from any supporting site in a common manner. That could be in the authoring stage of tools such as blogging platforms, or at the publication stage, such as Pownce showing embedded content for URLs that are posted to the service.

Use Cases

• Users republish any embeddable piece of content by providing just a URL
• Content from a URL extracted and displayed alongside links in microblogging systems such as Pownce and Tumblr, without those services having to write unique extraction code for every website.
• Content to be displayed alongside search results (e.g. via Yahoo SearchMonkey, or behind-the-scenes systems used for image previews)
• Where you type a URL into a message (e.g. on Facebook), a service looks up the URL and grabs the page title and a content snippet to display with the the message. A kind of ‘rich link’. This microformat would enable more relevant content to be parsed out of pages.
• Allow content to be marked up in such a way that the embed code can be taken from mark-up itself if appropriate, not just explicit chunks of code.
• Allow publishers to mark-up a piece of code used for embedding that differs from the code used by the publisher site.
  • e.g. Flickr photos on Flickr do not link to the Flickr page itself, but Flickr TOS dictate that photos must link back to Flickr. As such, the code they give users to embed a photo is different from the code they use to publish the photo.
  • However, when I repost that photo — linking to Flickr — the actual mark-up I used could be used by someone else to republish that photo in line with the TOS. Both publishing scenarios are valid.

Existing Systems

Existing formats and protocols for embeds.

oembed

The creators of Pownce have created an XML standard called oEmbed. This is a standalone XML representation of embeddable content, similar to a feed entry, but including additional fields for the host site (the publisher), and the exact code needed to include the content object in pages.

oEmbed uses an XRDS endpoint, linked to from the content page, to provide the oEmbed representation of a resource.

Summary of the oembed schema from "section 2.3.4. Response parameters":

type (required)

The resource type. Valid values, along with value-specific parameters, are described below.

version (required)

The oEmbed version number. This must be 1.0.

title (optional)

A text title, describing the resource.

author_name (optional)

The name of the author/owner of the resource.

author_url (optional)

A URL for the author/owner of the resource.

provider_name (optional)

The name of the resource provider.

provider_url (optional)

The url of the resource provider.

cache_age (optional)

The suggested cache lifetime for this resource, in seconds. Consumers may choose to use this value or not.

thumbnail_url (optional)

A URL to a thumbnail image representing the resource. The thumbnail must respect any maxwidth and maxheight parameters. If this paramater is present, thumbnail_width and thumbnail_height must also be present.

thumbnail_width (optional)

The width of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_height must also be present.

thumbnail_height (optional)

The height of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_width must also be present.

hMedia

Coincidentally, hMedia easily provides 80-90% of what oembed provides/needs:

fn - text

the name of the media resource, suitable for an oembed title.

contributor - text or hcard.

the author, suitable for oembed author_name and author_url (using hCard).

photo

suitable for an oembed thumbnail_url. when used on an IMG or OBJECT element, the width and height attributes of such element can be used for oembed thumbnail_width and thumbnail_height

player

suitable for the oembed html, as this property indicates the html element such as OBJECT used to embed the media in the page.

enclosure

A URL using rel-enclosure. suitable for ombed url. the type attribute on the rel-enclosure link can be used for the oembed type.

Other oembed properties and how to imply them:

• provider_url - use the following in order:
  1. use a rel-home link on the page.
  2. use a rel-index link on the page.
  3. or lacking one, use the site / domain root without a path.
• provider_name - retrieve the <title> element from the provider_url and use it for the oembed provider_name. cache this to avoid having to refetch it in the future.
• cache_age - same as the HTTP cache headers response for the page itself.
• version - any hMedia to oembed converter can simply provide "1.0" for this.

Given that hMedia instances can be converted to oembed, its not clear that anything other than hMedia is needed.

Examples

Publishers

Publisher examples record both the content of the provided embed code, and also the whether that same information is present in the mark-up of the page.

YouTube

In Page

• Video (object)
• Title
• Description
• HTML embed code (<input>)
• Permalink
• Author
  • Name
  • URL
• Site (Publisher)
• Rating
• Viewcount

— http://uk.youtube.com/watch?v=zP4zaMvV__4

Embed Code

<object width="425" height="344">
    <param name="movie" value="http://www.youtube.com/v/zP4zaMvV__4&hl=en&fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/zP4zaMvV__4&hl=en&fs=1" 
           type="application/x-shockwave-flash"
           allowscriptaccess="always"
           allowfullscreen="true"
           width="425"
           height="344"></embed>
</object>

• Video URL
• Media Dimensions

YouTube does not include any information about the video, author, licensing or source site in HTML. That content is all presented within the Flash object itselt.

Flickr

Flickr has two relevant pages; the photo page itself (which contains no explicit embed code) and the ‘All Photos’ page, which contains links to multiple sizes and example embed code.

Photo Page Schema

• Title
• Description
• Image (img)
• Author
• Publisher (site name)
• License
• Link to other sizes
• Page is the permalink

— http://www.flickr.com/photos/benward/3189768143/

‘All Sizes’ (embed page) schema

• Image (at size)
• License
• Author
• HTML embed code
• Direct link to image
• Additional reuse rules (‘photo must be linked to the photo page’)
• Links to other sizes
• Link back to main image (permalink)

— http://www.flickr.com/photos/benward/3189768143/sizes/l/

Embed Code

<a href="http://www.flickr.com/photos/benward/3189768143/" title="Fresh Baked by Ben Ward, on Flickr">
    <img src="http://farm4.static.flickr.com/3398/3189768143_2ca7da4544_b.jpg" width="1024" height="683" alt="Fresh Baked" />
</a>

• Photo URL
• Photo Title
• Photo Dimensions
• Author name
• Publisher Name
• Photo permalink

Vimeo

In Page

• Title
• Video (content)
• Description
• Author
• Publisher (vimeo)
• Published Date
• Link to raw video
• Embed code — revealed by clicking a link within a flash movie. Not present with JavaScript disabled.

Embed Code

<object width="400" height="225">
    <param name="allowfullscreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2755105&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=FF0E0F&amp;fullscreen=1" />
    <embed src="http://vimeo.com/moogaloop.swf?clip_id=2755105&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=FF0E0F&amp;fullscreen=1" 
           type="application/x-shockwave-flash"
           allowfullscreen="true"
            allowscriptaccess="always"
            width="400"
            height="225">
    </embed>
</object>
<br />
<a href="http://vimeo.com/">The Remnants</a>
from <a href="http://vimeo.com/johnaugust">John August</a>
on <a href="http://vimeo.com">Vimeo</a>.

• Video object
• Video dimensions
• Video title
• Permalink
• Publisher
  • Name (Vimeo)
  • URL
• Creator
  • Name
  • URL

Skitch

• Publishes 5 different embed codes. Interrrresting.

Consumers

Consumption of embedable content is spread throughout a number of different use cases:

Microblogging

Pownce

Pownce is the original pioneer of the oembed standard. It takes a URL input for an external resource, and where supported embedable content is found, the embed is included with the link post.

Pownce notes are already marked up with hAtom, and include embedded content within a class of attachment.

In addition to the fields of hAtom, the embedded content includes:

• Linking back to the publishing source
• Attribution to the embedded content creator
• Count of the times the content has been downloaded from this publisher

<li id="note4390327" class="public-note hentry">
    <div class="note-contents"> 
        <a href="/ariel/"> 
            <img src="/profile_photos/a/r/i/ariel/304_medium.jpg" width="48" height="48" title="Ariel Waldman" class="user" /> 
        	<em class="pro-2">Pro!</em> 
        </a> 
    
        <p class="entry-content">
            <em class="note-type entry-title">
                <a href="/ariel/notes/4390327/" rel="bookmark">Public</a>
            </em> 
            My favorite Pownce post from !<a href="/leahculver/">leahculver</a>.
        </p> 
    
        <div class="attachment">                
            <div> 
                <a href="http://flickr.com/photos/arielwaldman/3078507970/in/photostream/"> 
                    <img src="http://farm4.static.flickr.com/3210/3078507970_5811e41585_m.jpg" alt="Pownce" /><br /> 
                </a> 
            </div> 
                    
            <div class="by-caption">
                <span>photo by</span>
                <a href="http://www.flickr.com/photos/arielwaldman/" >arielwaldman</a>
            </div> 
        
            <a href="http://flickr.com/photos/arielwaldman/3078507970/in/photostream/" class="note-url"> 
                flickr.com/photos/arielwaldman/30...
            </a> 
            <div class="note-count"> 
                <span id="click-count-4390327">(14 views)</span>     
            </div> 
        </div> 

        <div class="note-location fireeagle"> 
            <span class="locator"><a href="/settings/fireeagle/">Fire Eagle</a>:
            <span class="locality">San Francisco, CA</span> 
            <span class="country-name">US</span>
        </div> 
	
        <h4> 
            <abbr class="published" title="1 day ago">1 day ago</abbr> 
            <span class="vcard author"> 
                <a href="/ariel/" class="sender url"> 
                    <span class="fn"> 
                        Ariel Waldman					
                    </span> 
                 </a> 				
            </span> 
	   
            <a href="/ariel/notes/4390327/" class="reply">2  Replies </a> 
            <a href="/ariel/notes/4390327/forward/" class="forward">Forward</a> 
        </h4> 
    </div>
</li>

— Source of a full note, embedding a Flickr photograph, from http://pownce.com/benward

<div class="attachment">     
    <div> 
        <span>                     
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
             codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
             width="300" height="247" id="jxT0ELP7az0" align="middle"> 
            <param name="movie" value="http://www.youtube.com/v/jxT0ELP7az0" /> 
            <embed src="http://www.youtube.com/v/jxT0ELP7az0" quality="high"
             width="300" height="247" name="jxT0ELP7az0"
             align="middle" allowScriptAccess="sameDomain"
             type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
            </object> 
        </span> 
    </div> 

    <a href="http://www.youtube.com/watch?v=jxT0ELP7az0" class="note-url">
        www.youtube.com/watch?v=jxT0ELP7a...
    </a> 
    <div class="note-count"> 
        <span id="click-count-3949474">(4 views)</span> 
    </div> 
</div>

— Source snippet of a video note, showing the YouTube video attachment, from [1]

Tumblr

Tumblr is the defacto tumblelog application, encouraging users to post small snippet posts of text, as well as reposting images, audio, video, text quotes and URLs. The output of Tumblr varies depending on the theme the user uses, and can be customised. As such, the following documents the inputs used to publish content.

• Text
  • Title
  • Text Content
• Photo
  • Either the URL of a already hosted photograph, or an image binary upload
  • Text Caption
  • Click-through URL (e.g. linking a Flickr photo back to the source page)
• Quote
  • Quote Text
  • Source (text, also usable as a desciption)
• Link/URL
  • Name (title)
  • URL
  • Description
• Chat (conversations)
  • Title
  • Dialogue (free text field, expects My Name: This is my message format text)
• Audio
  • Audio binary, or URL to externally hosted audio
  • Text description
• Video
  • URL for YouTube or Vimeo service videos, or paste custom embed code from any site.
  • Text caption

All post types include adding tags, setting the publication date, visibility (public/private), and the permalink slug.

Tumblr provides a quite strictly structured input mechanism, but the video type is most relevant, as this accepts the code provided by any site. This microformat could allow it to accept any URL, beyond just YouTube and Vimeo for which it has implemented proprietary support.

More to Document

• Delicious
• Yahoo Search
• Google Search
• Facebook's ‘Compose New Message’ interface