Fullscreen toggle for the built in youtube player
Permalink
Hi there,
I was trying to embed a fullscreen button in the built in youtube player and since there was no solution here or to be found on google I wanted to write this one down here.
So what I want is a working fullscreen button that'll work with most browsers. I gave up on the flash version since it's not working on the iPhone or iPad which is very important to me and any customers.
So iframe solution:
Basically you have to edit 2 files. (One for all browsers except IE and one for IE :-) )
1. concrete:blocks:youtube:view.php
Simply change the embed code in the iFrame section to this:
This will add the button and allow fullscreen on almost every browser (yes even webkit based)
2. IE
!!!I'm not quite sure if this is really necessary but in my case it helped a lot!!!!
So if you know better then please leave a comment or something.
You have to edit the following file:
concrete:libraries:3rdparty:securimage:example_form.php
There are two parameters called allowfullscreen which are set to "false". Set them both to "true".
I don't know how the youtube player is related with that file but it worked in IE as I did those changes and stopped working when I rolled them back.
This is tested with concrete5 5.6.2 (afaik the latest version up 2 date) and following browsers:
Safari 5++, Firefox 3++, IE 9++, Chrome and Safari mobile
For IE you still need an up2date adobe flash player. Worked fine with 11.5+ (Doesn't work on v9)
I hope this helps someone.
If you want to reply don't be a grammar nazi - I'm not a native English speaker ;-)
I was trying to embed a fullscreen button in the built in youtube player and since there was no solution here or to be found on google I wanted to write this one down here.
So what I want is a working fullscreen button that'll work with most browsers. I gave up on the flash version since it's not working on the iPhone or iPad which is very important to me and any customers.
So iframe solution:
Basically you have to edit 2 files. (One for all browsers except IE and one for IE :-) )
1. concrete:blocks:youtube:view.php
Simply change the embed code in the iFrame section to this:
<span id="youtube<?php echo $bID?>" class="youtubeBlock"> <?php if($url['host'] == 'youtu.be') { ?> <iframe class="youtube-player" type="text/html" width="<?php echo $vWidth; ?>" height="<?php echo $vHeight; ?>" src="http://www.youtube.com/embed/<?php echo $url['path']?>/<?php echo (strpos($url['path'], '@')) ? '@' : '?'; ?>version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> frameborder="0"></iframe> <?php }else { ?> <iframe class="youtube-player" type="text/html" width="<?php echo $vWidth; ?>" height="<?php echo $vHeight; ?>" src="http://www.youtube.com/embed/<?php echo $query['v']?>/<?php echo (strpos($query['v'], '@')) ? '@' : '?'; ?>version=3&rel=1&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> frameborder="0"></iframe> <?php } ?> </span>
This will add the button and allow fullscreen on almost every browser (yes even webkit based)
2. IE
!!!I'm not quite sure if this is really necessary but in my case it helped a lot!!!!
So if you know better then please leave a comment or something.
You have to edit the following file:
concrete:libraries:3rdparty:securimage:example_form.php
There are two parameters called allowfullscreen which are set to "false". Set them both to "true".
I don't know how the youtube player is related with that file but it worked in IE as I did those changes and stopped working when I rolled them back.
This is tested with concrete5 5.6.2 (afaik the latest version up 2 date) and following browsers:
Safari 5++, Firefox 3++, IE 9++, Chrome and Safari mobile
For IE you still need an up2date adobe flash player. Worked fine with 11.5+ (Doesn't work on v9)
I hope this helps someone.
If you want to reply don't be a grammar nazi - I'm not a native English speaker ;-)
