How-To: Smugmug Videos using oEmbed on WordPress.com Blogs

http://foggyphils.smugmug.com/Quests/Springy-Thingys/15173029_9bM2QF#1134860283_tvdEg-S-LB

*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">
http://foggyphils.smugmug.com/Quests/Springy-Thingys/15173029_9bM2QF#1134860283_tvdEg-S-LB
</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!):

http://api.smugmug.com/services/embed/image/1134860283_tvdEg?width=655&height=370

---

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

---

https://smugmughugs.wordpress.com