Home » Blog » Blog Maintenance » Using oEmbed for Dynamic, Futureproof Embedded Videos and Photos

Using oEmbed for Dynamic, Futureproof Embedded Videos and Photos

When writing and maintaining the codebase of my website, I’ve always tried to adhere the the highest degree of code standards compliance, flexibility, compatibility, and future maintainability and relevance. I’ve kept the use of plugins to a minimum, and have made sure that as much site content as possible is optimillay visible without the use of any special plugin or embed option. As this site glides into the future, I want all of the content to remain accessible.

When it comes to embedding media content on blog posts, there’s always a question of how to embed it most effectively. With YouTube, for example, should I use the flash embed code? iFrame embed code? Straight up HTML5 tags? What’s going to be the best for acessibility now, and into the future?

I always try to answer this question with asking “what’s the most simple, straightforward way to do it”. Lately with video, that answer has been YouTube’s iFrame embed code. By using this embed code, I’m essentially creating a portal in my blog post over to YouTube, and then letting YouTube decide which is the best way to display the media – whether it’s their standard flash video player, or newer h.264 or WebM video players – or whatever else comes up in the future.

Now, there’s a new way to embed media, called oEmbed. With oEmbed, I simply need to paste in the URL to an oEmbed compatible media page (Any YouTube video page, for example), and the oEmbed system take over. oEmbed allows the webpage to automatically talk to the referenced media website, and then make a determination of the best way to embed that media file in my site. By using this method, I’m simply pasting in the URL, and don’t need to mess around with iframe or flash embed code wrappers, or anything else. And, as my blog moves into the future, it’s likely that any new video playing or streaming technologies will be compatible with the oEmbed method.

One finally benefit this gives me is higher compatibility with my site’s design and layout. Using the old iFrame embed method with YouTube, my videos were at a fixed width, despite the dynamic width of my website. When a user viewed my site on their phone, the site scaled down to that size, but the rigid YoutTube player stayed at the full desktop size.

Now, with oEmbed, the optimal size is automatically detected, and scaled accordingly.

Find out more about oEmbed at https://oEmbed.com:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

Current Compatible oEmbed Providers and Sites

  • YouTube (https://www.youtube.com/)
  • Flickr (https://www.flickr.com/)
  • Viddler (https://www.viddler.com/)
  • Qik (https://qik.com/)
  • Revision3 (https://revision3.com/)
  • Hulu (https://www.hulu.com/)
  • Vimeo (https://vimeo.com/)
  • oohEmbed (https://oohembed.com/)
  • Poll Everywhere (https://www.polleverywhere.com/)
  • My Opera (https://my.opera.com/)
  • Embedly (https://api.embed.ly)
  • iFixit (https://www.iFixit.com)
  • SmugMug (https://www.smugmug.com/)
  • SlideShare (https://www.slideshare.net/)
  • WordPress.com (https://wordpress.com/
Here are a few examples of media embed with and without oEmbed:

Old YouTube Flash Embed Code:

New YouTube iFrame Embed Code:

oEmbed code, just the URL of the video pasted:

Flickr Image with IMG HTML tags:
IMG_2015

Flickr oEmbed, with simply the photo page URL pasted:

IMG_2015

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *