Embed video in multiple lines of text field in SharePoint List
Published May 01 2019 04:13 PM 1,727 Views
Microsoft

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-40..." 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.



1 Comment
Version history
Last update:
‎Sep 01 2020 04:02 PM
Updated by: