Tag Archives: video

Editing a Webpart with Embedded Video (Sharepoint 2007)

If you’ve embedded video in your Sharepoint page, especially using the roll-your-own approach I use, you’ll have come across a problem when trying to edit.

Issue is the embedded video lives in its own world, and covers up attempts to access the modify webpart menu:

editVideoFail

In the above image the black box is the video, and it appears as a layer that sits over the top of everything else on the page. Specifically, if you want to modify the webpart, good luck guessing where that menu option lives because the menu remains hidden behind the video window.

Thankfully there is a simple workaround. Minimize the webpart. Since that’s the only menu item still visible, you can click it without issue.

editVideo-Mini

And then once the video has been minimised the full edit menu is available to you.

editVideoModify

Afer you’ve completed your editing magic, simply Restore the webpart to put the video back into view.

editVideoRestore

Alternatively…

editVideo-Menu If all the above is too hard (really?) there’s another option IF you are using the publishing toolbar.

Just choose Modify from the Page menu in that toolbar. But note this is only viable if you’ve bothered to name your webparts uniquely.

Embedding Video in Sharepoint 2007

If you want to embed video in Sharepoint 2007 you have two options:

  • upload to a 3rd party video service (Youtube, DailyMotion, etc) and then use their embed code, or
  • upload to Sharepoint itself and roll your own code.

Either way you’ll add that code to your page using a Content Editor webpart.

Which to choose?

A 3rd party service has the advantages that it handles all the storage, conversion to suitable formats, streaming, etc.  It also, often, allows you to upload files much larger than corporate intranets allow.  However it is less secure, and most IT departments baulk at sharing corporate files externally.  That’s if you bother to tell them.  You’ve also the issue that if your internal audience does not have internet access then your video will not play.

Rolling your own internally is a lot less risky from availability and security perspectives.  But you do need the tools/support to ensure the video can be delivered in a size (file and resolution) and format that will work for you.

Code to use – 3rd party site

To use Youtube, or similar, simply upload your video to their site and then copy the code they provide for you to embed that video on your site.  You’ll find it somewhere under “share” or similar headings.  For Youtube (this week’s interface design) it appears below the video under Share > Embed:

embedYoutube

Code to use – DIY

If uploading the video to your own site, copy the following code to add to your sharepoint page.


<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
width="640" height="360" id="mediaplayer1" title="Win Media Player">

<param name="FileName" value="/path/to/video.wmv">
<param name="AutoStart" value="False">
<param name="ShowControls" value="True">
<param name="ShowStatusBar" value="False">
<param name="ShowDisplay" value="False">
<param name="AutoRewind" value="True">
<param name="DisplayBackColor" value="True" />
<param name="BufferingTime" value="6">

<embed src="/path/to/video.wmv" width="640" height="360" 
 autostart="True" type="application/x-mplayer2"
 pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
 filename="/path/to/video.wmv" showcontrols="True" 
 showstatusbar="False" showdisplay="False" autorewind="True" 
 displaybackcolor="True" bufferingtime="6">
</embed>

</object>

Notice you have to enter your video filename (and path) in three separate locations. And you have to enter the width and height twice.

There are a heap of options listed in the above code. Feel free to tweak. The above set is my default set.

Adding to your page

To add the code, either set, to your page, add a Content Editor Webpart.  Click the Source Editor button.  Then paste in the appropriate code.  Save, sit back, and revel in your awesomeness.

Then for bonus points see if you can find a way to show something other than a blank, black screen when the video first appears on the page. Short of some JQuery smarts where you show a screenshot image that when clicked is replaced by the video with Autostart, not sure what can be done?