Embed Video in SharePoint blog

The rich text editor in the SharePoint blog strips out any HTML that isn't an image or anchor tag. My client wants to embed video in a blog post using an <EMBED> tag:


<EMBED src=http://intranet.companyname.com/styles/CompanynameMediaPlayer.swf width=640 height=384 type=application/x-shockwave-flash FlashVars="values=rtmpt://companyname.fcod.llnwd.net/a629/o1/int/IIG/IRPS/ibts_technology_123112_fk?ip=192.175.160.0/19&amp;h=cd7aac23fc8643ff6f299e5e178bf7a7&amp;amp;autoPlay=true&amp;amp;skinName=http://intranet.companyname.com/styles/CompanynameMediaPlayerSkinAS3.swf&amp;amp;playVideoButton=true&amp;amp;hideFSButton=true" allowScriptAccess="always"></EMBED>

The highlighted text above shows the actual location of the video.

However SharePoint will allow a <video> tag because it isn't valid HTML.

I enter the video into the blog post in this format:
<video>rtmpt://companyname.fcod.llnwd.net/a629/o1/int/IIG/IRPS/ibts_technology_123112_fk?ip=192.175.160.0/19&amp;</video>

So I created a jquery script that would replace the opening <video> tag with the text highlighted in pink above, and replace the </video> tag with the text highlighted in green above. How to implement the solution:
1. Create a document library on your site for scripts.

2. Upload a Jquery library to the scripts library.

3. Edit the following code in Notepad:

<script type="text/javascript" src="http://companyname.com/irps/home/video/Scripts/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function() {

 $(".ms-PostBody").html(function(index, oldHtml) {
  var matchStr ="(&lt;video&gt;)(.*?)(&lt;/video&gt;)";
  var m = oldHtml.match(matchStr);

 $.each(m, function (index, value) {
  var regexp1 = new RegExp("(&lt;video&gt;)");
  var regexp2 = new RegExp("(&lt;/video&gt;)");
   oldHtml = oldHtml.replace(value, value.replace(regexp1, '<embed src=http://intranet.companyname.com/styles/CompanyNameMediaPlayer.swf width=640 height=384 type=application/x-shockwave-flash Flashvars="values=').replace(regexp2, 'autoplay=true&amp;skinName=http://intranet.companyname.com/styles/CompanynameMediaPlayerSkinAS3.swf&amp;playVideoButton=true&amp;hideFSButton=true" allowScriptAccess="always"></embed>'));
  });

  return oldHtml;

  });
});

4. After it is uploaded, copy the URL of the Jquery library from the script library on your site and paste it into the area highlighted above:

5. Save the file in Notepad as a file named videoBlog.js

6. Upload the videoBlog.js file to your scripts document library.

7.  Open your blog.  You need to add content editor web parts to two pages on your blog: 
/VideoBlog/default.aspx
and
/VideoBlog/Lists/Posts/Post.aspx

Enter the following urls to put the pages into Edit mode:

 /VideoBlog/default.aspx?ToolPaneView=2&PageView=Shared

 

8. Add a content editor webpart at the bottom of the page. 

 

9. Link to the videoBlog.js file you uploaded to the Scripts library in step 6 above.

 

10.  Set the chrome to display none

 

11. Save the page and repeat the steps 8-10 for the other page:

 

/VideoBlog/Lists/Posts/Post.aspx?ToolPaneView=2&PageView=Shared

 

 

Note:  The size of the video is hardcoded in the javascript code.