Overview
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
Solution
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:
1. User provides all the properties for video in RTE dialog
2. Video player tag is inserted into SharePoint Rich Text Editor from RTE dialog:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!– Video player tag is inserted into SharePoint Rich Text Editor from RTE Dialog –> | |
<!– When the List Form or View page is rendered, this tag is replaced with <iframe> (and video player) via YouTube IFrame API –> | |
<div id="ytplayer"> | |
<span style="display: none;">Z6-iUNfJsJw;320;215</span> <!– player info in the following format VideoId;Width:Height –> | |
</div> | |
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
The IFrame player API is intended for embedding a YouTube video player on a website and control the player using JavaScript. The IFrame API posts content to an <iframe>
tag on a page.
The code demonstrates how to create an embedded player that will load a video
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ytplayersinfolist = []; | |
//This function creates an <iframe> (and YouTube player) | |
//after the API code downloads | |
function onYouTubeIframeAPIReady() { | |
if (typeof window.playerInfoList === 'undefined') | |
return; | |
for (var i = 0; i < window.playerInfoList.length; i++) { | |
createYTPlayer(window.playerInfoList[i]); | |
} | |
} | |
// This function loads the IFrame Player API code asynchronously | |
function registerYTIFrameApi() { | |
var tag = document.createElement('script'); | |
tag.src = "https://www.youtube.com/iframe_api"; | |
var firstScriptTag = document.getElementsByTagName('script')[0]; | |
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
} | |
function initYTPlayer(playerInfo) { | |
return new YT.Player(playerInfo.id, { | |
height: playerInfo.height, | |
width: playerInfo.width, | |
videoId: playerInfo.videoId | |
}); | |
} |
References
- 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