I'm using codes like this in my blog:

<iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

And my question is simple, how can I automatically add allowfullscreen to every new iframe using javascript/jQuery?

Also, I presume the script should identify if there's the tag allowfullscreen added already.

I couldn't find a solution anywhere else.

I'm using codes like this in my blog:

<iframe width="560" height="315" src="https://www.youtube-nocookie./embed/0eBDVy5nihM?rel=0" frameborder="0" allowfullscreen></iframe>

And my question is simple, how can I automatically add allowfullscreen to every new iframe using javascript/jQuery?

Also, I presume the script should identify if there's the tag allowfullscreen added already.

I couldn't find a solution anywhere else.

• javascript
• jquery
• html
• iframe

• How are you creating the iframes currently? – Heretic Monkey Commented Jul 24, 2017 at 17:57

2 Answers 2

Should be just this:

$('iframe').attr('allowFullScreen', '');

There is no need to check for allready set allowfullscreen as there will be no error if it is.

From here: https://stackoverflow./a/3774041/3764994 and here: Set IFrame allowfullscreen with javascript

To get all the iframe elements use getElementsByTagName(), then iterate over those with a for loop:

Something like this:

var i, frames;
frames = document.getElementsByTagName("iframe");
for (i = 0; i < frames.length; ++i)
{
      // The iFrame
    if (!frames[i].hasAttribute("allowfullscreen")) {
        frames[i].setAttribute('allowFullScreen', '')
    }
}