Appending an iframe to a lightning component

Question

I'm trying to append an iframe to a nested div, but for some reason, the append doesn't work when it's an iframe.

var cmpStyle = "width: " + theWidth + "; height: " + theHeight;
$("#createInMe").append("<div id=\'vid-" + cmpID + "\' 
class=\'videoWrapper\'></div>");
$("#vid-" + cmpID).append("<div id=\'iframe-" + cmpID + "\' 
class=\'videoWrapperIframe\' style=\'" + cmpStyle + "\'></div>");
$("#iframe-" + cmpID).append("<iframe id=\'myId\' width=\'560\' height=\'315\' src=\'https://www.youtube.com/embed/IBvf7KUEZ78\' allowfullscreen=\'true\'></iframe>");

The first two divs are created as hoped for, but the iframe does not get created.

I changed it to one string and get the same result in the inspect element window.

<div id="createInMe" data-aura-rendered-by="825:0" class="cSaleFunnel" data-aura-class="cSaleFunnel">
    <div class="videoWrapper" id="vid-a1p2a0000005NKEAA2">
        <div style="width: 100%; height: undefined%" class="videoWrapperIframe" id="iframe-a1p2a0000005NKEAA2"></div>
    </div>
</div>

UPDATE: I believe this has something to do with Salesforce preventing specific types of things from being injectable into the DOM. The reason that I say that is because of the following code.

var bgImage = theResult[i].Image_URL__c;
var cmpStyle = "display: block; width: " + theWidth + "; height: " + theHeight + "; background-image: url(\'" + bgImage + "\')";
$("#createInMe").append("<div id=\'img-" + cmpID + "\' style=\'" + cmpStyle + " \'></div>");


$A.createComponent(
    "aura:HTML", {
        "tag": "div",
        "HTMLAttributes": {
            "id": cmpID,
            "style": cmpStyle
        }
    },
    function(components, status, errorMessage) {
        if (status === "SUCCESS") {
            var body = component.get("v.body");
            body.push(components);
            component.set("v.body", body);
        }
    }
);

Now, the createComponent function creates the banner image as hoped for, but the jquery append creates a div with the following style:

display: block;
width: 100%;
height: 250px;
background-image: url(;

It will not add the URL portion, and I tried writing the code in various ways. Does this mean that the only way to create my nested divs is through createComponent? And if so, how do I create my nested div with the iframe two divs deep?

Answer 1

The apostrophes in the CSS are being misinterpreted. This is a case of not sufficiently escaping quotes; what is happening here is the string is being prematurely terminated, which causes the element to parse incorrectly.

For this reason, I'd recommend using $A.createComponents, which eliminates the possibility that you'll screw up something trivial like this. However, to actually fix this problem, use a template string instead:

var cmpStyle = `display: block; width: ${theWidth}; height: ${theHeight}; background-image: url('${bgImage}')`;
$("#createInMe").append(`<div id="img-${cmpID}" style="${cmpStyle}" />`);

---

Example code using $A.createComponents:

<aura:application >
    <div aura:id="container">

    </div>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
</aura:application>

---

({
    init: function(component, event, helper) {
        var cmpID = component.getGlobalId(), cmpStyle = "";
        $A.createComponents(
            [
                ["div",{ id: "vid-"+cmpID, class:"videoWrapper" }],
                ["div",{ id: "iframe-"+cmpID, class: "videoWrapperIFrame", style: cmpStyle }],
                ["iframe",{ id:"myId", width:"560", height:"315", allowfullscreen:"true",
                           src:"https://www.youtube.com/embed/IBvf7KUEZ78" }
                ]
            ],
            (components, status, error) => {
                switch(status) {
                case "DRAFT":
                case "SUCCESS":
                components[0].set("v.body", components[1]);
                components[1].set("v.body", components[2]);
                component.find("container").set("v.body", components[0]);
                break;
                case "ERROR":
                alert(error[0].message);
            }
            });
    }
})