Disrupting MLB Advanced Media's no-embed meme with HTML5 'iframe'

For a while there it looked to me like MLB Advanced Media had convinced all the MLB Clubs to allow sharing of the locally produced content --- thus making the MLB.com site truly a place of advanced media ...

But over the past few days I've run into the same old fallacious content hording meme at MLB.com that results in video content being unavailable for embed.

For example, in last night's 'Game Notes' post I talked about the Izturis foul ball call - the article relied very much on my memory of the event (and later, after MLB posted video content on the subject) - seeing a replay of the event. As it was I was left with adding a boring link at the bottom of the post, rather than an nice embed. An embed would have 'blinged' the article beautifully (worked well with the content I wrote).

Embedding video on blogs and in social media networks ensures readers have an excellent user experience - and thus leave them with a 'warm glow' after experiencing my content production - about MLB's content production.

It's a win-win for producers all the way down the line - and adds value to both producers content.

Without embeds, that key Live feel that makes internet media experiences truly great - falls down to mediocre, lame, a 'loser', Web 1.0 - kind of experience where the reader is left wondering why the writer didn't embed the video - or wondering why MLB is so lame that they don't allow embeds.

Bad taste in the mouth - no warm glow = Internet #Fail.

So I thought I'd stop waiting for MLB clubs to catch up to the new Now - stop waiting for MLB to stop ruining my baseball writing presentations --- and do something about it!

The world of internet technology is all about Sharing --- it's THE foundation stone of the thing. And as we are at the very beginning of a long period of revolution about communications, the technology of the internet is seemingly, forever moving forward.

So even while the clubs of MLB dither and prevaricate about signing content deals with their media production partners that allow widespread sharing - I've been learning more and more about with the possibilities in the new and game-changing HTML5 protocols. I've discerned from my limited understanding of iframes - that an iframe basically allows one to open any page on the web inside of a styled box in a html document - and that I could end-run any coding that does not allow embedding videos by housing the entire MLB page inside an HTML5 iframe tag

Below is an 'iframe' that houses an MLB.com page that is running the video I wanted - on page load. It's the Rays' video of last night's game where Tampa Bay manager Joe Maddon gets ejected for arguing the Izturis foul ball call.

MLB won't allow embedding of this video - they only offer a link to the page.

That link to the MLB page is coded so that it renders inside an HTML5 iframe. Around that iframe I added an 'outer container' - that has an 'overflow hidden' element in it, and thus only shows a relatively small 'keyhole' - a window through which you can see - that reveals a small portion of the web page behind it. By tweaking the position of that page behind the keyhole, I can position that page so the video lines up exactly in the keyhole. So now it looked like it's a video embed.

Now I said to myself triumphantly, I can embed any video from any web page on the planet - coded for sharing or not. If it's up online - it's embeddable in any blog or website - period.

Take that, you dinosaurs of the broadcast era. :)

(You need to be running an HTML5 Browser or this post is likely a bloody mess --> Chrome 25, Firefox 19, IE8, Opera 12.1, Safari 5.1)

MLB - 05/08/13 "Maddon tossed for disputing call" (02:29)
(http://mlb.mlb.com/video/play.jsp?content_id=26965373&topic_id=8877450&c_id=tb&tcid=vpp_copy_26965373&v=3)

<br /> <div class="keyhole-container" style="border: 1px solid #00369C; height: 361px; overflow: hidden; width: 645px;"> <div class="iframe-container" style="height: 500px; left: -175px; position: relative; top: -124px; width: 645px;"> <iframe height="600" src="http://mlb.mlb.com/video/play.jsp?content_id=26965373&topic_id=8877450&c_id=tb&tcid=vpp_copy_26965373&v=3" width="835"><br /> </div> </div>

Update 2013-05-12:
This Experiment failed after several attempted work-arounds; so I've place the coding in a textarea - if you want to try fiddling with it.

I believe the hidden page behind the overflow hidden keyhole element, extended beyond the right border of the main-wrapper (the body of the blog), and thus kicked the sidebar wrapper down under the body.

But as a proof of concept this 'faux-embed' did work. But the concept doesn't have the flexibility to work anywhere but in a blog or website that has it's body width set specifically to house the MLB Gameday defaults.


Update II: MLB has the video available for embed now. :)



Update III:: Oh. Now I see on render, that this is not the case.

Another kind of faux-embed. :)



mh