How to Add Videos to SharePoint 2013

How to Add Videos to SharePoint 2013

November 19, 2015 by

From a project management point of view, ensuring that your team has easy access to training is often key to project success. In this post, I’m going to describe how to add multiple videos to SharePoint and to make them all accessible from one page by adding navigation that means the users don’t have to leave the page.

 

Improve collaboration with a free, ready-to-use SharePoint project management template

 

This post assumes that you have multiple videos that you want to make available in SharePoint; however, if you only have one video to start with, you should still find value to the post.

 

Get iframe Embed Codes

The easiest way to get the iframe embed codes is to add the movies to a video hosting platform like Wistia or YouTube.

If this is not possible, you can use a SharePoint Assets library to get the iframe embed codes.

  1. Click Site Contents | add an app | Assets Library.create-assets-libraryNote: The Assets Library can sometimes be found on the second page of available apps.
  2. Upload the movies to the library.
  3. Click on a movie thumbnail to go to the page for that movie.
  4.  Click < > on the movie to open the code window.
    code1
  5. Copy and paste the code into a text editor and save this file – you will be using it shortly.
    Add Videos to SharePoint 2013

Add Videos to Web Part Page

Next, you will add two script editor web parts, one for the movies and one for the navigation that will enable you to switch between movies. If you only have one movie, you will only need to add the one script editor web part.

  1. Add the script editor web parts – I’m adding them to the row that has the two columns.
    Add Videos to SharePoint 2013
  2. Click EDIT SNIPPET on the web part where you want the movies to play.
  3. Paste in the embed code for the movie you want to be available when the page loads.
  4. Add code that names the iframe (e.g. name=”training-movies”) as shown below.
  5. Click Insert.
    Add Videos to SharePoint 2013
  6. Save

Create Movie Navigation

Next, you need to add your movie navigation. The below code should get you started –

  1. Copy the below code to your clipboard and paste it into the file where you pasted the iframe URLs.
    <p><a href=”//fast.wistia.net/embed/iframe/m1″ target=”training-movies”>Movie 1
    <p><a href=”//fast.wistia.net/embed/iframe/m2″ target=”training-movies”>Movie 2</a></p>
    <p><a href=”//fast.wistia.net/embed/iframe/m3″ target=”training-movies”>Movie 3
    <p><a href=”//fast.wistia.net/embed/iframe/m4″ target=”training-movies”>Movie 4
    <p><a href=”//fast.wistia.net/embed/iframe/m5″ target=”training-movies”>Movie 5
  2. Update the URL (the bit between the brackts) after href and the movie title (e.g. Move 1) in the code for every movie you want to make available.
  3. Copy the code.
    Add Videos to SharePoint 2013
  4. Click edit snippet on the other script editor web part, paste in the copied code and click Insert.
    Add Videos to SharePoint 2013
  5. Click Stop Editing!

Voila! You now have a video library for your team to take their training! If you know what you are doing, you could probably improve the navigation panel on the left so that it indicates which movie is select; however, that is another day’s work!

Add Videos to SharePoint 2013

 

Donal McCarthy

Donal has been a BrightWorker for so long, he remembers when his desktop got Windows XP. Starting as a technical writer, he is now responsible for making sure all the marketing systems make life beautiful for our website visitors, prospects and sales teams. He is a firm Microsoftie, and enjoys writing 'how to' articles and posts about the latest in technology from Microsoft. Outside of BrightWork, he is a family man who enjoys reading, cooking, and following the Irish and Connacht rugby teams.

Latest posts by Donal McCarthy (see all)

    Pin It on Pinterest

    Share This