Adding Embedded Video to a SharePoint Blog
A client recently asked me how to put video into a SharePoint blog post. Naturally it turns out to be one of those things that isn’t as straightforward as it seems at first. Put the html into a post and it gets filtered out.
A little investigation shows that the filtering is happening in the editor – if you modify the Body column in the Posts list to be a plain text field any custom html makes it to the page without any issues. It’s a solution that works as far as the reader can tell, but manually editing html tags for the entire post is hardly ideal.
A more usable solution is to add an additional column to the Posts list. The new column can hold any html without filtering, and you get to use the rich text editor for the rest of the post.
From there, you just need to get the new field to display. I’m using the CKS enhanced blog, so the way to do this will be a bit different from the out of box blog template.
In post.xsl and postlist.xsl add
above the body of the post. The post view includes all fields by default so that will be enough to make the unfiltered field appear when viewing a single post.
The list view doesn’t include the new fields, so you will also need to change category.aspx and home.aspx add the attribute
ViewFieldsXML = “”
to the EBE:PostList element and your posts can include video or anything else that gets filtered out by the standard editor.
Advertisement
I am not sure on the location of the inserts. Is it possible to give a screen shot of both files( code snippet anyway)
Thanks
Wayne
November 21, 2007 at 1:50 pm
Can you give us a more precise example about how to add videos in blogs?
I don’t understand how you can display this video adding a column in your posts list because all the object and embed tags are filtered when you click on publish button.
Thx for help.
Loic
December 20, 2007 at 11:05 am
The tags only get stripped out if you use the rich text editor, which will write only the html it understands. If you set it up as plain text it will remain as you entered it.
There are some additional complications if you are using publishing pages, but that doesn’t apply in this case.
Tom Clarkson
February 9, 2008 at 10:02 pm
Have you been able to get the text field to that hold object tag to show in a blog editor like Window Live Writer. I like your suggestion but if the text field does not show in the blog editor, then users of the blog I am creating will not want to use this method.
Marlon
February 23, 2008 at 7:08 pm
I haven’t tried using this with another blog editor, so I wouldn’t expect it to work as is. I usually post to my blog from OneNote, but I publish as a draft then do a final edit through the web form so I can add any less standard bits through that interface.
It would probably be possible to make a similar approach work with a blog editor though. Since the indications I’ve seen are that it is the editing component that strips out object tags, it would be interesting to see what an event handler on the post list sees when something is posted from the alternate editor. If the necessary data turns out to be there, you might be able to convert it to the multi-field representation, or do something similar to the [[]] formatting for links in the wiki.
Tom Clarkson
February 24, 2008 at 4:28 am
Hi Tom,
We are trying to do something similar. Can this be done without using CKS enhanced blog?
If yes, how can we make the additional field appear on the blog post?
Thanks.
Angela
Angela
April 24, 2008 at 12:57 am
Without CKS adding the video to the page would be a bit different. The exact method would depend on whether you are using code or sharepoint designer – it’s all based on standard sharepoint list items, so either the dataview or custom code should work for making a custom view of the posts list that includes the video.
Tom Clarkson
April 24, 2008 at 9:49 pm
Hi Tom,
Thanks for the reply.
I inserted a new column “Video” as a text field as advised. Using Designer and dataview, I can only insert this new column as a hyperlink. Our videos are streamed from another server and the url has to be “mms://filename.wmv”.
Have not been able to make the video appear except as a hyperlink.
Any advice will be much appreciated.
Thanks,
Angela
Angela
April 25, 2008 at 1:57 am
Yes, the visual tools will only take you so far. However, if you can get it to show up as a link you can probably also edit the xsl manually and use it as part of whatever html you want to put in.
Tom Clarkson
April 25, 2008 at 5:22 am
Hi Tom,
Thanks a lot for the advice. I managed to make the video appear on the blog post. =)
Angela
Angela
April 26, 2008 at 5:09 am
Hi Angela, can u detail a step by step instructions how you get the video to appear on the blog post ? We just couldn’t get it up ! Thanks in advance.
Affendi.
affendi
April 27, 2008 at 10:10 pm
Hi Affendi,
Sorry for the late reply.
Our videos are streamed from another server so not sure if your case is the same.
Here’s what I did:
1) Just as Tom said in his post above, create a new column (I named it “video”) using single line or multiline text but the type must be “plain text”.
2) Suggest you create a new post and enter some data first. In the newly created “video” column, I have to enter something like this:
mms://servername/filename.wmv.
3) The “video” column does not appear on the blog post. Have to make it appear using Designer.
In Microsoft Designer, open the post page. The blog post is actually a list view web part. Convert this to a xslt data view.
4) Upon conversion, the data source will be available. Drag the “video” field into the blog post where you want the video to appear.
5)If you look at the code where the new field is added, you should see something like:
6) Replace the above with:
http://@Video
Save the file and the video should appear on the blog post.
Hope it works for you. =)
Angela
May 7, 2008 at 6:39 pm
Hi Angela, I was with you through steps 1,2,3 but on converting the list view web part to xslt I got an error – Failed setting processor stylesheet: 0×80004005: Expression expected: .–>=<– @Author
I've clearly messed up somewhere … are you able to provide further pointers?
Thanks a million
Paul
May 28, 2008 at 11:01 pm
Are you changing default.aspx?
Tim
May 29, 2008 at 1:32 am
@Paul – That sort of error isn’t easily tracked down. Not all things you can do in designer get translated to xsl well, so the best option is to work from a new dataview/listview.
@Tim – With CKS:EBE you change post.xsl, postlist.xsl, home.aspx and category.aspx. With out of box sharepoint you are changing a web part which could be on any page.
Tom Clarkson
June 2, 2008 at 8:49 pm
Neat stuff. Maybe this can also be of some assistance, I just published it in the Codeplex:
http://www.codeplex.com/erte
It enables you to imbed it directly in the post.
Boris Gomiunik
July 23, 2008 at 5:31 am
I use the ERTE mentioned in the comment above and it works like a charm without having the to spend hours tinkering with Sharepoint. Just install the java script and gif file in the master page folder and edit one line of code on the master default page and your good to go. Give you an embed button on the Text Rich Editor Toolbar.
Melissa
March 4, 2009 at 12:31 pm
I have followed all of the steps above and have the extra (video) field displayed in the section where my blog appears but it is not displaying the video. Please help as I have now been working on this for several days with no success.
Lynne
December 29, 2009 at 2:39 am
Hi ,
Can someone please provide where to add the column and what’s the syntax. it seems in the above post the column names and syntax is missing. I am new to SharePoint and XSL. It will be really gr8 if someone can post at the earliest.
Thnx in advance.
Raj
June 15, 2010 at 2:06 am