Adding Flash animation in SharePoint Blog and other lists pt. 1

UPDATE: This is an outdated method. There is a much easier way. See ERTE on Codeplex or ERTE on my new blog.

SharePoint's rich text field is much better than in version 2.0. It even enables to edit the HTML source. But one thing I don't understand is why it filters out the HTML code so much that we can't even embed the Flash animations or videos into the content. This is a major drawback for SharePoint Blog.

Fortunately I've come up with a nearest thing to a remedy. It's using Deconcept SWF object. It will replace an "alternative" content in a layer with a flash animation (this is also a good way to bypass the "Click to activete this control..." issue in IE). 

Let's say we have a blog and a video to embed for example - this one from YouTube. A simple way of doing it - if you have only one video in the page is:

1. Create a document library and upload the swfobject.js (downloaded from author's website) to it (or just upload it to the root of your website with SharePoint Designer).

 

2. Add a blog post and in the body edit the HTML code and insert the following code:

<div id="flashcontent">Please check this post on my website to view the video</div>

3. In the blog homepage and in the post details page (post.aspx), add a Content editor webpart and edit the source. Enter the following code:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var so = new SWFObject("http://www.youtube.com/v/Z2yNzw00mpA&rel=1", "mymovie", "425", "355", "8", "#FFFFFF");
    so.write("flashcontent");
</script>

For comparison I'm pasting also the YouTube's embed code and I'm color coding it to match the script:

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Z2yNzw00mpA&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Z2yNzw00mpA&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

For more details on the script and how to add flashvars. Just be sure to have the right path to swfobject.js and to have the right ID of the div and in the script (in the case above: "flashcontent".

This is the result:

 

Unfortunately in the RSS is still showing the alternate content.

 

This is the method of adding only one video per page. You'd need multiple div ids and you't always need to add to the script below. Fortunately I've prepared a way of automating this. More about this... Stay tuned for my next post.

Technorati tags: SharePoint JavaScript Flash SharePoint Blog