*Note- Yikes! It looks like this theme cuts the video in half on post pages using the “standard” post format!


This example and Code include my trial and tribulations while trying to understand the how and why of embedding SmugMug Videos in WordPress.com Blogs. This post focuses on the easiest way to embed SmugMug Videos. If you have a self-hosted WordPress.org installation, you will not have many of the problems of wordpress.com users as we are restricted in our use of html tags, all JavaScript is stripped out, and plugins can not be installed. See the WordPress.com vs. WordPress.org documentation for more information.

Now, let’s get started with the easiest way to embed SmugMug Videos in to WordPress.com. Future posts will include more ways to customize SmugMug Videos.


The Code

Code entered into the HTML editor.


*Note that the div tags are not required. All you really have to include is the video link that you copy from your browser after you have selected a video from Smugmug.


I had to use an image to display the above code.
If you put the exact code above into the [ sourcecode = "html" ] shortcode (without the spaces), this is what renders instead:

<div align="center">

</div>

*Note that I didn’t enter an iframe into the editor. It’s converted somehow between WordPress and/or the oEmbed API.


However, if you try to COPY and PASTE that second code into the HTML editor, then this is what renders (a smugmug api link!):


Although the oEmbed is simple enough, I would really like to control the height and width of the video. If you look closely, you can see that I chose the small (s-LB) web link; However, instead of the smaller size video, it renders as auto (a-LB) instead. Unfortunately, I have not found a way to get around this yet! Or at least a way that doesn’t need flash. (Unlike flash, using oEmbed allows iPhone, iPad, and other mobile devices to view your video.) Hopefully, further investigation will prove otherwise!

The primary thing to remember when using the oEmbed feature for SmugMug Videos, is the html video link must be on its own line, preferably via the HTML editor. Switching between the html and visual editor can move your link! Using the Save Draft button before switching editors sometimes helps as well. If you use the visual editor, make sure the video link is not hyperlinked (blue with a line underneath). To unlink, highlight the video link and click the unlink button in the editor. I should also mention the div tags are not necessary to display the video. They are used to center the video within the main column. (Credit and thanks go to Panos at WordPress Tips for showing me how to align the video)


References for Further Investigation

SmugMug oEmbed:

SmugMug (http://www.smugmug.com/)
URL Scheme: http://*.smugmug.com/*
URL Scheme: http://*.example.com/* (where example.com = SmugMug customer domain)
Endpoint: http://api.smugmug.com/services/oembed/
Documentation: http://wiki.smugmug.net/display/API/oEmbed
Example: http://api.smugmug.com/services/oembed/?url=http://www.smugmug.com/popular/all%23125787395_hQSj9
Supports discovery via tags
*Reference oEmbed.com

WordPress oEmbed:

WordPress.com (http://wordpress.com/)
Endpoint: http://public-api.wordpress.com/oembed/
Documentation: http://develop.wordpress.com/oembed-provider-api/
Example: http://public-api.wordpress.com/oembed/1.0/?format=json&url=http%3A%2F%2Fmatt.wordpress.com%2F2011%2F07%2F14%2Fclouds-over-new-york%2F&for=oembed.com
Supports discovery via tags
*Reference Oembed.com

Related WordPress.com Links for oEmbed:

WordPress.com oEmbed Provider API
WordPress News WordPress oEmbed API Announcement


http://smugmughugs.wordpress.com

About these ads

About squareplug

My first husband and three kids travel fulltime throughout the US in a 39' Monte Vista Fifth Wheel. Follow our trip at http://www.foggyphils.com. Be sure to subscribe if you would like to receive notifications by email when a new post is published!

6 responses »

  1. [...] the How-to: Smugmug Videos using oEmbed post. http://smugmughugs.wordpress.com Share this:MoreDiggEmailPrintLike this:LikeBe the first to like [...]

  2. [...] Smugmug Videos using oEmbed on WordPress.com Blogs (smugmughugs.wordpress.com) [...]

  3. [...] This photo uses the same technique as presented in the tutorial: How to Embed SmugMug Videos using oEmbed [...]

  4. [...] Smugmug Videos using oEmbed on WordPress.com Blogs Sharen mit:TeilenLike this:LikeSei der Erste, dem dieser post gefällt. [...]

  5. [...] Smugmug Videos using oEmbed on WordPress.com Blogs (smugmughugs.wordpress.com) [...]

  6. [...] Smugmug Videos using oEmbed on WordPress.com Blogs (smugmughugs.wordpress.com) [...]

Smug Comment...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s