We have already discussed how to embed video from YouTube and another Video Providers into SharePoint, in particular it was demonstrated how to:
- store embed video properties and render YouTube player via Computed Field
- store embed code and render YouTube player using customized List View
In both cases some kind of customization should be applied for List/Library in order to render YouTube player in List Forms and Views. In first case custom fields are used for storing embed code properties and a computed field for rendering player. In the second case, custom fields are used for storing embed code itself and YouTube player is rendered via customized List View and Field.
This time we will discuss another approach that is intended for sharing video in out-of-the box List and Libraries, like Blogs and Discussion Boards.
How to embed Video in SharePoint Blog and Discussion Board
Before we will dive into technical details about implementation let me show some usage scenarios.
In order to embed a video into SharePoint:
- On YouTube site click the Share button located under the video.
- Click the Embed button.
- Copy VideoId value from src attribute value provided in the expanded box .
- Add reply for a Discussion and select Insert Tab – Share Video – YouTube Video Button to insert YouTube video on page
- Specify YouTube Video parameters and click OK button to insert YouTube player on page
- Saved Message item (for Discussion List)
- Blogs View
The solution consist of:
- SharePoint Ribbon and Page Component for Sharing Video
- RTE with the capability to insert video player
- Render video player on List Forms and Views
SharePoint Ribbon and Page Component for Sharing Video
1. The existing group Ribbon.EditingTools.CPInsert.Media is extended with the buttons for video sharing.
2. Video Sharing Page component is developed for interaction with the Server Ribbon:
RTE with the capability to insert video player
By default YouTube video player is rendered as IFrame element. Since in SharePoint 2010 it is not allowed to store iframe content into Publishing HTML field the alternative solution is proposed here:
2. Video player tag is inserted into SharePoint Rich Text Editor from RTE dialog:
3. When the List Form or View page is rendered, YouTube player is created and video is loaded.
Render video player on List Forms and Views
<iframe> tag on a page.
The code demonstrates how to create an embedded player that will load a video
- Share Video for SharePoint project on GitHub
- YouTube Player API Reference for iframe Embeds
- Embedding and Sharing Video in SharePoint
- Embedding and Sharing Video in SharePoint. Part Two: Posting embedded code, support for different Video Providers, Preview view
- Embedding and Sharing Video in SharePoint. Part Three: Aggregating Video Feeds and utilizing API