Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Youtube Iframe no fullscreen button

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:

enter image description here

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.

like image 433
Chris Avatar asked Aug 31 '12 14:08

Chris


3 Answers

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.

like image 139
Chris Avatar answered Oct 13 '22 13:10

Chris


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.....

like image 43
Maurice Avatar answered Oct 13 '22 12:10

Maurice


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>
like image 38
chriscshepherd Avatar answered Oct 13 '22 11:10

chriscshepherd