Allow attribute will take precedence over 'allowfullscreen'.

I'm getting this warning message because I've added an iframe with both allow="fullscreen" and allowfullscreen.

allow doesn't seem to work in IE, Edge, or Firefox, according to .

How can I resolve/silence this warning message in a cross-browser compatible way?

Here's a minimal snippet to reproduce the warning message in Chrome:

const iframe = document.createElement('iframe');
iframe.setAttribute('allowFullScreen', '');
iframe.setAttribute('allow', 'fullscreen');

Allow attribute will take precedence over 'allowfullscreen'.

I'm getting this warning message because I've added an iframe with both allow="fullscreen" and allowfullscreen.

allow doesn't seem to work in IE, Edge, or Firefox, according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe.

How can I resolve/silence this warning message in a cross-browser compatible way?

Here's a minimal snippet to reproduce the warning message in Chrome:

const iframe = document.createElement('iframe');
iframe.setAttribute('allowFullScreen', '');
iframe.setAttribute('allow', 'fullscreen');

• javascript
• iframe
• cross-browser

2 Answers 2

Turns out swapping the order of those setAttribute lines silences the warning:

const iframe = document.createElement('iframe');
iframe.setAttribute('allow', 'fullscreen'); // must be 1st
iframe.setAttribute('allowFullScreen', '');

On a Vimeo embed iFrame, remove allowFullScreen altogether.

From

<div class="embed-responsive embed-responsive-16by9"><iframe src="https://player.vimeo.com/video/000000000" allow="autoplay; fullscreen" allowfullscreen></iframe></div>

To

<div class="embed-responsive embed-responsive-16by9"><iframe src="https://player.vimeo.com/video/000000000" allow="autoplay; fullscreen"></iframe></div>