Hardcoded binding in iframe's src to a Kaltura video works. But, binding it to a variable does not work in 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.