How to include a Microsoft Stream video on embedded help?

Alex Macdonel
Tera Expert

We're upgrading to Kingston and we became aware of the embedded help, we'd like to include videos in here, but instead of hosting them on youtube or vimeo we'd like to host on Microsoft Stream as we have more control over them.

I've played with the embed code and funny thing is that when I paste it, I am able to get it to work on the editor, but when I save it, the whole <div> section gets cleared out except for a few parameters:

 

Code working in editor:

<p>Here is where we can explain how to create a KB article in detail.</p>
<div class="video"><iframe src="https://web.microsoftstream.com/embed/video/cc042a5a-339c-45f6-8106-b9ffbe1b48c7?autoplay=false&amp;showinfo=false" frameborder="0" allowfullscreen=""></iframe>
<p class="p">Video</p>
</div>
<p>&nbsp;</p>

After saving the record I see this:

<p>&nbsp;</p>
<p>Here is where we can explain how to create a KB article in detail.</p>
<div class="video"><iframe frameborder="0" allowfullscreen=""></iframe>
<p class="p">Video</p>
</div>

 

Is this the html sanitizer at work? I tried adding a video entry to the whitelist, but it doesn't seem to work:

video: {
attribute:["controls","width","height","src"],
}

 

Anyone tried embedding videos and had better luck? Any pointers you can give me?

Thanks!

16 REPLIES 16

Rajesh Kannan G
ServiceNow Employee
ServiceNow Employee

Did you whitelist the attributes of iframe. I updated HTMLSanitizerConfig as shown below and it worked.

	
	HTML_WHITELIST : {
		globalAttributes: {
			attribute:[],
			attributeValuePattern:{}
		},
		iframe: {
			attribute: ["width", "height", "src", "frameborder",  "allowfullscreen"],
            attributeValuePattern:{}
		}
	},

 

Thanks,

Rajesh

Alex Macdonel
Tera Expert

Thanks but that didn't work; if I replace the src part with a youtube video it saves fine. It's almost as if the source is removed if video is not hosted on youtube or vimeo.

Rajesh Kannan G
ServiceNow Employee
ServiceNow Employee

Have you tried setting a value pattern for src attribute that matches the given URL like the below.

attributeValuePattern:{src:".*"}

Thanks,

Rajesh

it didn't work. I'll open a ticket with SN.

 

Thanks for your help!