iframe 的 src 中的硬编码绑定到 Kaltura 视频作品。 但是，将其绑定到变量在 IE 中不起作用

Question

I have a SharePoint site that loads angularjs on it. On one of my sites, I'm trying to show an iframe with an embedded video from Kaltura. See below for snippets of my code.

NOTE: The embed video below is NOT the actual video because of confidentiality reasons.

JavaScript file:

var embedVideoLink = 'https://mediaspace.company.com/embed/secure/iframe/entryId/0_dfnoklj0/uiConfId/12345678'; 
$('<iframe>')
    .attr('id', 'cf_iframe_video')
    .attr('src', embedVideoLink)
    .attr('frameborder', 0)
    .attr('allow', 'autoplay *; fullscreen *; encrypted-media *')
    .attr('allowfullscreen', 'allowfullscreen')
    .attr('width', '100%')
    .attr('height', '350px')
    .appendTo('#cf_iframe_video_container');

HTML File:

<div id="cf_iframe_video_container" class="row embed-responsive embed-responsive-16by9">

The above code works perfectly fine in Chrome and Edge, but NOT in IE. I keep seeing "Error kWdiget never ready" on IE.

In order to make it work in IE11, I bind the src with the hardcoded value like this:

.attr('src', 'https://mediaspace.company.com/embed/secure/iframe/entryId/0_dfnoklj0/uiConfId/12345678')

But I cannot do that because the embed link is stored somewhere else and users are free to replace it. Am I missing something in here? What can you suggest I do so I can make it work with IE11 as well?

Answer 1

I refactored my code. I instead took the whole embedCode from User input. Sample expected input:

<iframe src="https://mediaspace.company.com/embed/secure/iframe/entryId/0_hx1rzwia/uiConfId/12345678" frameborder="0" class="kmsembed" width="100%" height="350px" allow="autoplay *; fullscreen *; encrypted-media *" allowfullscreen="allowfullscreen"></iframe>

Then, my js code looks like this:

var embedCode = curItem.checklist; //Taken from User Input in a SharePoint List
embedCode = embedCode.replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '\\"').replace(/&#58;/g, ':').replace(/\\/g,'');
var embeddedIframe = '';
embeddedIframe = common.decodeHTML(embedCode);
$scope.embeddedVideo = $sce.trustAsHtml(embeddedIframe);

Finally, the HTML file looks like this:

<div id="cf_iframe_video_container" class="row embed-responsive embed-responsive-16by9" ng-bind-html="embeddedVideo">

It now works as expected.