YouTube iframe embed - full screen

Question

In the current YouTube iframe (2021), you have to add fullscreen to the allow attribute:

<iframe allow="fullscreen;">

---

If I understand correctly you have an iframe that contains a second iframe (the youtube one).
Try adding the allowfullscreen attribute to the "parent" iframe.

For full browser support it should look like this:

<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe> 

React.JS People, remember allowFullScreen and frameBorder="0"

Without camel-case, react strips these tags out!

Adding allowfullscreen="allowfullscreen" and altering the type of YouTube embed fixed my issue.

In HTML5, simply use:

<iframe src="https://www.youtube.com/embed/ID" allowfullscreen /> 

This attribute can be set to true if the frame is allowed to be placed into full-screen mode by calling it's Element.requestFullscreen() method. If this isn't set, the element can't be placed into full-screen mode. See Mozilla Docs

In React.js framework use property allowFullScreen.

Note that there are more answers pointing to different directions, so hope this post will unite and simplify all mentioned with latest valid approach.

I had to add allowFullScreen attribute to the "parent" iframe. The case of the attribute does matter. I don't think Firefox or Edge/IE11 has a browser specific allowFullScreen attribute. So it looks something like this:

<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>