Insert JavaScript or Embed a Video into SharePoint 2013

07/17/2012

SharePoint 2013

In SharePoint 2007 and SharePoint 2010, we had the Content Editor web part as a work around to add JavaScript, CSS, or another markup into SharePoint. SharePoint 2013 has given us the Script Editor. Let’s take a look at how effortlessly we can add our code to SharePoint.

I’m starting with a Team Site template and I’m going to use the “Edit” icon in the top right to put the page in edit mode.

Select “Page” from the ribbon and choose “Insert” then “Web Part”.

Select the Script Editor web part under “Media and Content”.

Edit the web part on the page and you’ll notice the “Edit Snippet” in the contents of the Script Editor web part.

Select “Edit Snippet” and we are presented with a dialog box to enter our embed code. I chose a random video from YouTube. J

You can, of course, insert JavaScript into the Embed box. This is a simple today’s date script. It does not give you a preview of your code though like the embed video from YouTube.

Click “Insert” then “Ok” on the web part properties. Save and Close your edits using the link in the top right. I like how the web part defaults with no chrome (no Title). All done!

_________________________________________

About these ads

Subscribe

Subscribe to our RSS feed and social profiles to receive updates.

6 Comments on “Insert JavaScript or Embed a Video into SharePoint 2013”

  1. Adam Harmetz Says:

    Fellow SharePoint Adam here. =)

    Happened to stumble upon your post here and figured I’d mention that it gets even better! Take a YouTube embed code and paste it directly onto the page and see what happens. No need to even click the Embed button!

    -Adam Harmetz
    Lead Program Manager, SharePoint ECM Team
    (twitter: AdamHarmetz)

    Reply

  2. Anatoly Mironov Says:

    Reblogged this on Share… What? and commented:
    New features for sharepoint editors: embed js code or video. Nice intro.

    Reply

  3. Alasdair Says:

    In theory you’d think you could use this to add CSS with a tag but in my experience you enter the tag into the box, click Insert and it doesn’t work. When you go back to edit the embed code it’s just blank.

    I’ve found a way to fix this. Rather than repost the same fix all over the internet, I’ve replied to a query on Stack Overflow here:

    http://stackoverflow.com/questions/21905139/sharepoint-2013-deleteing-contents-of-style-in-embed-code-when-saving

    Reply

  4. webbrewers Says:

    This is a typically convoluted Msft design though – if you use the “embed code” tool and enter a script tag, it will add a script editor web part for you. The embed code tool and script editor web part do essentially the same thing so why not just ditch “embed code” and make the script editor web part the prominent tool? See more here:

    http://365.webbrewers.com/blog/Lists/Posts/Post.aspx?ID=30

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 44 other followers

%d bloggers like this: