Adding video to a Sharepoint Online blog post (SharePoint 2010)

wmpWhen you create a new blog site in SPO, the default blog post promises it will: “….help you share information related to a particular subject area in the form of text, images, links, and other media such as video”. Unfortunately, Sharepoint strips out any embed tags like iframe or object from any list, so video can’t be directly added to a post – which is actually a list item in a standard list.This article will show you how to workaround that restriction and insert any embedded content into any list – in 3 easy steps.

Add an empty div to a post (or rich text field in any list).
Insert a content editor web part linked to a file
Create a file with a little javascript that injects your embed code into the empty div in the list
By locating the embed code outside the list, the “illegal” embed tags are rendered after the list and aren’t detected by the list filters. Javascript insertsyour embedded content inside the blog post wherever you inserted the empty div. And, yes, you’ll finally be able to add video content – beloved by search engines everywhere – to your blog. (I’m using a blog as an example here, but this can be adapted to insert any kind of coding into a rich text field in any type of list).
What you’ll end up with is a really easy way to manage embedded content. By simply adding or adjusting the embed code in one “central” text file, you can add a new video, change dimensions, change videos, insert a powerpoint slideshow etc. And since this technique only uses standard web parts and javascript, it should work the same no matter which version of Sharepoint you’re using – 2010 or 2013.

Here’s how:
Since we’re talking about adding a video to a Sharepoint list, here’s an example – an embedded video that will show you how to do just that. Text instructions and the code snippets needed come after the video!

untitled2

1/ Insert an empty div
Open the post for editing and click the “edit html source” button. Add an empty div where you want the video to appear.
Give it an id you will use later in the javascript: in this example –

div id=”test”></div

untitled2

2/ Add a content editor web part
All the posts use the post.aspx page so to open it for editing enter //Lists/Posts/Post.aspx?ToolPaneView=2&PageView=shared
Click “add a web part”, select a content editor web part and then click “edit web part”
In the properties box, enter /Documents/test.txt in the “content link” pane
The code MUST be rendered after the empty div so select the right zone under “layout” to make sure it is.
Select “None” for the chrome type so a web part title doesn’t show in your blog.
Save the web part and the page

3/ The code
You can either create a text file with the code below and upload it to the Documents library, or even easier create it right in Sharepoint Designer. Just make sure the id (in this example: “test”) corresponds to the id of the div you added to the list in the first step.
Open the site in SPD – navigate to the Documents library – click the new file tool and select text file – change the file name* – paste in the code below.
*The only requirement for the file name is that its url correspond to what you entered in the content editor.

Video inserted in post–>
script type=”text/javascript”>
vartest=document.getElementById(“test”);if(document.getElementById(“test”)){document.getElementById(“test”).innerHTML=’YOUR EMBED CODE GOES HERE-YOU CAN PASTE IT FROM YOU TUBE OR OTHER HOST’} /script>

Once you save the file, the content editor will run the code and bypass Sharepoint’s restriction on embedded content.

Multiple videos on a page
Since all posts use the posts.aspx page and the text file is already being referenced, you can add more instances of the inner html javascript to the text file. Each instance must have a unique div id which must be referenced in the file. In other words, you can add an empty div with an id of “test2” to the same or another post, and repeat the javascript in your file using “test2” in place of “test”.
One more trick: once you’ve inserted the content editor web part on one page, you can save it in your web part gallery and make it available for use on other sites or pages. To do that, select the web part in Sharepoint Designer. Click “Web Part Tools – Format” in the ribbon. Click “To Site Gallery” under the “Save Web Part” section. To add it to another page or site, select where you want it in design view (in SPD), open the web part tool and insert it.