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:

<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 ;-)

View Replies: