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.
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.
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.....
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With