Adding video to your Office 365 public website

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:

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:

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>