IMPORTANT UPDATE NOTE: While this post is still true, I have found a better way to achieve embedding of restricted SharePoint tags using this as the starting point (you can read about it here). Therefore the video you see below WAS NOT embedded using the method detailed here, but was instead upgraded to use the new method. I’ll leave the code and these instructions up, but I suggest after reading it to get your mind wrapped around the issue, just move on to the best way to accomplish the mission.
So in yesterday’s blog post I had successfully figured out a way to support the <embed> tag in a SharePoint Blog, even though the SharePoint engine strips out that tag (along with iframe and javascript and any other tag it thinks is suspicious) when the post is submitted. I got around the restriction by encoding the embed information in a title attribute of a div and than using a javascript file published on my server. I than used Microsoft Office SharePoint Designer 2007 to hard-coded into the underlying blog post display page a reference to the js file that runs on page load. The script on the client reverses the encoding and converts the div back into a embed tag.
So that’s good, what’s next you ask? I’m using WLW (Windows Live Writer 2009 / version 14.n.n.n) as my blogging tool (and I REALLY like it), and I wanted to make a plugin for it that could take the embed tag in the WLW and auto-convert it into the encoded div format. So that’s what I did.
Now I could walk you thru my project, but I’ll save you all those details, but if you want to see it (or even use it) you can download my project source from here LongCloud.LiveWriter.PlugIn.SharePointEmbed.zip.
Instead of walking you thru how I built my project, if you are interested in creating your own WLW PlugIn, here are the links I used to learn how to write one.
These links should tell you how to get started.
So what does my Plug-In do? let me illustrate; let’s find something we want to embed, I’ll go to YouTube and look up a video I want to show you
I’ll copy the embed tag from the page.
1: <object width="480" height="295">
2: <param name="movie" value="http://www.youtube.com/v/2Mhr-UiJrm8&hl=en&fs=1"></param>
3: <param name="allowFullScreen" value="true"></param>
4: <param name="allowscriptaccess" value="always"></param>
5: <embed src="http://www.youtube.com/v/2Mhr-UiJrm8&hl=en&fs=1" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
6: </object>
There are two ways you can proceed, you could paste the embed tag into WLW and then select the embed text and click on my Plug-In, or you can just use the Insert menu and select SharePoint <embed>. This will open my insert encoding window in an empty state and you can paste the code directly in to that dialog. I’m going to do the latter
And paste in the embed information from YouTube
Unfortunately, at this time, my plugin will only support the <embed> portion of this tag, so I’ll need to strip out the rest XHTML 1.1 section that YouTube has given me. I then click the Validate button.
You don’t have to click the Validate, you could just click OK, but this way you can check the new encoded div tag and add any information or styling you would like (like this).
Now Click the OK button and your encode video is inserted, and if you see the video below in this blog post, then my plugin has worked correctly.
My Embedded Battlestar Galactica Video
