First published on TECHNET on Apr 19, 2018
This post is a contribution from Jing Wang, an engineer with the SharePoint Developer Support team
Problem Description:
SharePoint site user created a custom list and added a multiple line of text field called “note”, which is used to embed a video.
The video is stored in Azure.
Add new item to the list, insert the content with “<>Edit Source” button on Ribbon:
<link href="//amp.azure.net/libs/amp/2.1.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/2.1.3/azuremediaplayer.min.js"></script>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
<script type="text/javascript">
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width: "640",
height: "400",
}
myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": "https://sccpssvideo.streaming.mediaservices.windows.net/ab838cb0-befe-40bd-b873-f9793e86255d/Capital Improvements Committee M.ism/manifest",
"type": "application/vnd.ms-sstr+xml"
}
]);
</script>
Click on Ok, got warning:
Warning: Some of your markup was stripped out…. The JavaScript is removed. The video does not get inserted.
Solution:
Use following iframe tag to embed the video instead, which eliminate the use of Javascript.
<iframe width="500" height="280" align="center" src="https://aka.ms/ampembed?url=https://sccpssvideo.streaming.mediaservices.windows.net/ab838cb0-befe-40bd-b873-f9793e86255d/Capital%20Improvements%20Committee%20M.ism/manifest&autoplay=false" frameborder="no"></iframe>
Before you copy and paste above html source to the note field, go to Site Settings and make modification to the below setting first:
Under "Site Collection Administration"
- Go to Html Field Security:
- Select “Permit contributors to insert iframes from the following list of external domains into pages on this site” and Add “aka.ms” for Allow iframes from this domain:
Then copy the iframe html tag to the list field as shown below.
Save the list item, browse to the list, and you should be able to see the video.
Microsoft
