Highslide: fullscreen not working in an iframe

Question

I'm building a website under wordpress and I'm using highslide to diplay a flash video player in an iframe.

This player can normally go fullscreen by clicking a dedicated button but since it's developped in Away3D the fullscreen is not working with Google Chrome (known bug): it's going blank.

That's why I had to use a script on the page loading the player to go fullscreen through google fullscreen API.

You can see examples on the following test site (that I made up just for you since I'm working offline for now):

http://ipgtest.co.nf

• The first ipad image just loads a classic highslide: it's working perfectly.
• The second ipad image loads the flash player loader page alone and you'll see that the fullscreen button (arrow) on the player works perfectly on google chrome and every other browser.
• The third ipad image loads the flash player loader page in an iframe in highslide and you'll see that the fullscreen button doesn't work at all on Google Chrome...

feel free to read the source code of http://ipgtest.co.nf/play/index.html to see how the chrome fullscreen is taken care normally.

Tanks a lot for your help, I really despear to find a solution...

Julien

Answer 1

Based on Juliens latest comment above with info about a trick by adding allowfullscreen webkitallowfullscreen mozallowfullscreen to the code for the iframe, the only solution is to add the same code to the code that creates the iframe in the highslide-full.js file (or the highslide-with-html.js file - it depends of which Highslide file you’re using).

Open the Highslide js file in a text editor (not Word or similar) and find this line:
(line 1668 in highslide-full.js - line 1435 in highslide-with-html.js / both version 4.1.13, the line number might change in later versions)

this.body.innerHTML += '<iframe name="hs'+ (new Date()).getTime() +'" frameborder="0" key="'+ this.key +'" '

Change the line to this:

this.body.innerHTML += '<iframe allowfullscreen webkitallowfullscreen mozallowfullscreen name="hs'+ (new Date()).getTime() +'" frameborder="0" key="'+ this.key +'" '