I added attribute "allowfullscreen='true'" to a iframe in my lightning component, then when the Lightning component is loaded, the attribute is strangely disappeared. I don't know why this happen and how to fix this.

  • But this wont't happen in Visaulforce page.
    – S.Wayne
    Feb 24, 2017 at 9:11
  • Have you tried this allowfullscreen="allowfullscreen"? Feb 24, 2017 at 9:14
  • 1
    I tried this after you mentioned, but this didn't work. I solve this problem by adding this attribute in JavaScript code.
    – S.Wayne
    Mar 1, 2017 at 6:33
  • That's Great. You did it. Mar 1, 2017 at 6:38

1 Answer 1


Using the new render event in Summer 17, you can do this:

<aura:handler name="render" value="{!this}" action="{!c.doRender}"/>

<iframe src="{!v.iframeUrl}"

Render function:

doRender : function(component, event, helper) {
  var frames = document.getElementsByClassName("my_iframe");

  for (var i = 0; i < frames.length; i++) {
    var frame = frames[i];
    frame.setAttribute("allowfullscreen", "allowfullscreen");

Prior to this, you would need to put this markup in the renderer.js file - you can't just use the init handler, as the iframe doesn't exist yet. Plus dom manipulation should be in the renderer - (not the case anymore after Summer 17)

If you do use a renderer.js file, just call this:

afterRender: function(component, helper) {
  return this.superAfterRender();

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .