Embed video in multiple lines of text field in SharePoint List

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.