blog

Embed YouTube and other code into SharePoint 2010

Posted on by A Pearce

SharePoint likes to keep code safe and when adding embedded code SharePoint takes a look and decides whether or not to it likes it.  And a good example of this is YouTube content.

SharePoint being safe

When we navigate to our SharePoint we select the Edit site button and then click on HTML and select Edit HTML Source.

image

I’ve selected a video from YouTube and have copied the embedded code.  I’m now going to paste this code into the window that opened up.

image

When we select OK to save this code and expect the YouTube video to load on our page we get this yellow warning message appear and then disappear very quickly and the YouTube video appears on our page.

image

When we click save to save the page the YouTube video disappears and when we go and check the HTML Source it is now completely empty.

Embedding code to SharePoint

There are many ways to resolve this issue and one of these includes stopping SharePoint from removing the embedded code but this isn’t realistic.

Instead we are going to save the content of the embedded code to a text file, upload it and then use a web part to pull this information viewing it as HTML and loading the content.

Open notepad and paste the embedded code into it.

SNAGHTML1352467

Save the file and upload the file into SharePoint.  A good place would be the SiteAssets library.

Add a content editor web part to your page and edit the web part.

image

In the properties box down the right hand side you will see 3 dots, click on these to open up a new windows.

image

Paste the URL of the text file we uploaded and click OK

SNAGHTML14a4002

When you now save your SharePoint page you will always have your embedded code.

image

This doesn’t necessarily have to be a YouTube video.  It could be flash code, html code or any other embeddable code.

16 Responses to Embed YouTube and other code into SharePoint 2010

Dan says: July 6, 2011 at 10:40 pm

Thanks for the article Alex. I was giving it a try and everyting was working except when I tried to save the page. Now the page is locked in edit mode except I cannot edit anything. Do you have any suggestions? Thanks

Reply
Alex Pearce says: July 6, 2011 at 10:47 pm

Hi, hard to tell unless you can give full description of everything on you pages ;-) .

Try doing it through SharePoint Designer or try a different browser.

Alex

Reply
Dawn says: July 8, 2011 at 4:11 pm

So easy, and it worked perfectly. Great solution! Thanks!

Reply
dolly says: July 12, 2011 at 12:21 pm

How to embed the youtube in SharePoint 2010 blogs? it is disappearing after publishing the post.

Reply
Alex Pearce says: July 12, 2011 at 2:50 pm

Dolly,
Does the content editor web part get deleted too?

Reply
James says: September 23, 2011 at 5:29 pm

Hi,

I’m pulling my hair out trying to embed videos into my blog (no webpart available). You mentioned “…There are many ways to resolve this issue and one of these includes stopping SharePoint from removing the embedded code but this isn’t realistic…”

Please, please can you tell/link me to how to do this? (I’ll take it as read that this is something you should never ever do etc)

Reply
P Stevens says: October 31, 2011 at 1:18 pm

Hi Alex

I just used these instructions to get a video on the SIMS Learning gateway. Worked first time. Superb and saved me a lot of time – now this is the way to go!

Thanks

Paul

Reply
Steven Buehler says: April 25, 2012 at 5:23 pm

This doesn’t answer how to embed a video into a Sharepoint Blog. You can’t insert web parts into a blog posting.

Reply
Alex Pearce says: April 25, 2012 at 5:53 pm

steve you are correct, it does not solve the issue within blod posts

A.

Reply
Mr. Bill says: May 9, 2012 at 3:30 pm

This is a great approach to help solve an aggravating issue that’s just about had me tied in knots… Thank you!!

Reply
Ross King says: August 2, 2012 at 2:44 am

Alex,

Great post! but is there a way to publish the embed code into a blog post or news article page? I’ve been trying to embed flickr code and it was driving me nuts.

All I can think to do is link to the flickr page to view the slideshow but I don’t really want to point people away from our site.

Is there any way to embed the code? or how do you turn off the embedding within sharepoint? or is that not advisable?

Any help you can provide, I’m sure my remaining hair would be very grateful!

Cheers,
Ross

Reply
Eric says: August 10, 2012 at 5:28 pm

Very helpful. Our district starting using Sharepoint 2010 and this was exactly what I needed. Awesome. Thanks!

Reply
Chris says: April 21, 2014 at 2:57 pm

Hello,
Our school uses SharePoint 2007 for our school websites. The issue is that they are all https sites, when I followed your steps I can see the video coming up in my page. My students however cannot. Is there a way around this?

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>