function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Salesforce Practice 46Salesforce Practice 46 

iframe allowfullscreen not working for innerHTML

I need your help. When I am using unescapedHtml, I am able to see option to fullscreen the video played in iframe. On the other hand, when I am using innerHTML, it is not working. I need to use innerHTML to get its element. So, please help. 

Component code -
 
<aura:component >
    <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>    
    <aura:attribute name="myhtml" type="string" />
    <div id="articleContainer" aura:id="container"/>    
    <aura:unescapedHtml value="{!v.myhtml}"/>    
</aura:component>


Controller code -

({
    onRender: function(component, event, helper) {
        var myhtml = '<iframe allowfullscreen width="560" height="315" src="https://www.youtube.com/embed/hBrSHW-vLgw" title="Rockstar Buddies Channel" frameborder="0"></iframe>';
        var el = document.createElement( 'html' );
        el.innerHTML = myhtml;        
        var divContainer = component.find('container');
        if (divContainer){
            divContainer.getElement().innerHTML = el.innerHTML;
        }
        
        component.set("v.myhtml", myhtml);
    },
})
naveen sharma 33naveen sharma 33
I did just comment some line of your code. Other than that your code is working fine. Please confirm from your side. and let me know. Thanks User-added image
naveen sharma 33naveen sharma 33
Even fullscreen option is working
Salesforce Practice 46Salesforce Practice 46
@naveen sharma 33, bro, I added 2 types of code here. First code uses "innerHTML" to show the video and second code set "myhtml" to show video through "unescapedHtml". 

My question is, full screen option is appearning using the second code but not using first code. However, for my requirement, I need to use first way only because it also helps me using get element by id and other methods. If my html is big and contains h3 tag, I am not able to get html element through javascript if I am using second approach. So, I need solution which helps into this as well.

By removing the first code does not fix it, we want same functionality using first code "innerHTML".

Note: We are also able to show fullscreen using "lightning:formattedRichText" but that has same issue of get element by id not fetching component.