Sometimes you may want to add a video to your Office 365 public website. While you could for example upload your video to a service such as YouTube and use the provided HTML code to embed it with the Video Gadget, more than often you may prefer to host the video within your own site.

What you need to do so is your video in a suitable format (e.g. .mov, .flv, .wmv, .mpg, .avi, etc.) and Flowplayer, a free JavaScript library.

Download the latest version of Flowplayer, and unpack the contents of the ZIP file to your documents. Next, open your Office 365 public website, click on Member Login, and then on Documents, and upload the following files to it:
flowplayer.controls-3.2.5.swf, flowplayer-3.2.6.min.js, flowplayer-3.2.7.swf, and style.css (Note: depending on the latest version of flowplayer, the file names may be slightly different). Also, upload your video file to the library (I uploaded a file called flowplayer-700.flv), and you should have the following:
flowplayer1

The second step is to add the video to your page. Click on Web Pages, and click on the Page on which you want to show the video. Insert a HTML Gadget at the desired location, and paste the following code:

<SCRIPT type=text/javascript defer src=”/Documents/flowplayer-3.2.6.min.js”></SCRIPT>
<LINK rel=stylesheet type=text/css href=”/Documents/style.css”>
<A style=”WIDTH: 260px; DISPLAY: block; HEIGHT: 165px” id=player href=”/Documents/flowplayer-700.flv”></A>
<SCRIPT defer>
flowplayer(“player”, “/Documents/flowplayer-3.2.7.swf”);
</SCRIPT>

Note: update the WIDTH and HEIGHT values accordingly, and replace flowplayer-700.flv with your own video.

That’s it! You now have a video embedded in your page:
flowplayer3

Flowplayer offers a lot of flexibility when it comes to its controls and the design, have a look at the documentation for further details on how you can add a preview image to the video, don’t play it immediately by default (use flowplayer(“player”, “/Documents/flowplayer-3.2.7.swf”, {clip: {autoPlay: true}}); )    , and others.

Lastly, if you want to add multiple videos on a single page, do the following:
Add multiple A tags with different IDs (here, player1 and player2), and call them separately in the bottom JavaScript code:

<SCRIPT type=text/javascript defer src=”/Documents/flowplayer-3.2.6.min.js”></SCRIPT>
<LINK rel=stylesheet type=text/css href=”/Documents/style.css”>

<A style=”WIDTH: 260px; DISPLAY: block; HEIGHT: 165px” id=player1 href=”/Documents/flowplayer-700.flv”></A>
<A style=”WIDTH: 260px; DISPLAY: block; HEIGHT: 165px” id=player2 href=”/Documents/flowplayer-700.flv”></A>

<SCRIPT defer>
flowplayer(“player1”, “/Documents/flowplayer-3.2.7.swf”);
flowplayer(“player2”, “/Documents/flowplayer-3.2.7.swf”);
</SCRIPT>

2 thoughts on “Adding video to your Office 365 public website”

  1. Hi I’ve followed these instructions carefully but I think my video may be too big as it isn’t uploading. I’ve changed it from .wmv because it was 158mb to an MP4 file but it’s now 211mb. What should I try next please?

    1. Hi Heather,
      yes, you’re right, the video is too big. While it is still within the official file size limit (250MB), it is too large to be viewed easily online.
      There are two main factors that still influence your video size, which are video length and video resolution. You can reduce the video resolution to achieve a smaller file size. There are several programs that can help you with that (maybe even the one that you used to convert yours), I don’t have a good recommendation at the moment, though.
      As for recommended size, that mostly depends on the kind of content that you are presenting, and how good it looks like after you reduced the resolution. I’d test it with a width of 640 and see if it’s ok, and then try to tweak it up (e.g. width of 800) if there’s still room for improvement

Leave a Reply

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