Youtube Iframe no fullscreen button

Question

Maybe it's Friday afternoon kicking in but for some reason I seem unable to get a fullscreen button to appear on my embedded Youtube videos. All I'm doing is copying the share code which is generated from a Youtube video:

<iframe width="560" height="315" src="http://www.youtube.com/embed/hFoQVx8ZcHo?rel=0" frameborder="0" allowfullscreen></iframe>

So for example with this code http://jsfiddle.net/chricholson/v8sjL/ I see:

I found some articles which said about the URL being wrong /v/[code] rather than /embed/[code] but copying directly from Youtube I thought I'd be safe.

Answer 1

solved...! if you have an iframe(youtube) inside an iframe(jsfiddle) inside main HTML you need to define

webkitallowfullscreen mozallowfullscreen allowfullscreen

to both the iframes in order for it to work.....

Answer 2

It seems I needed a number of changes, final code:

<iframe width="560" height="315" src="http://www.youtube.com/embed/hFoQVx8ZcHo?rel=0&fs=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>​

Firstly, the URL needs &fs=1, this triggers the button to show. Additionally, webkitallowfullscreen and mozallowfullscreen are needed, stating the obvious these solve browser specific problems.

One interesting thing I did find, despite having the working code, this sample DOES NOT work through jsfiddle, presumably something to do with being inside of an iframe. See http://jsfiddle.net/mrchris2013/v8sjL/5/ for what I mean.

Answer 3

The fullscreen option came back expect I had to remove &fs=1 at the end of the link.

<iframe width="1280" height="720" src="http://www.youtube.com/embed/doXntJaJ-nQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>