Apple doesn't allow non-native videos to use their native full screen support.
Native full screen on iPhone is therefore not possible.
When you play a video full screen on iOS iphone, Apple always uses the quicktime player, which will not support the interactive hihaho layer.
If you share the interactive video via a link like this, our development team has solved this with a handy workaround. Unfortunately, this functionality does not work if you embed the video, because we cannot expand your video beyond the iFrame.
Do you embed the video on your website or platform and want to create the same effect? Then (with technical knowledge), you could do this trick yourself.
On this page we provide information about the concept and instructions.
If you're not familiar with JavaScript API, check out our easier workaround.
Concept
You could simulate full screen by:
Forcing horizontal orientation of the app
Placing the embed at full screen size.
This should give a close to full screen experience, or at least as close to actually possible considering Apple determines the rules on their platform.
Our non-embedded version (player page) looks like it has a full screen option on iPhone, because we simply scale it to 100% width and height inside the browser, but this is not full screen, and doesn't work in an iframe, because we cannot expand our video beyond the iframe.
So as the party embedding a hihaho video, you would have to perform the same trick as we do. To make this possible we broadcast enter-fullscreen and exit-fullscreen js api events, so you can listen to the user clicks on the fullscreen button and then apply the suggestions.
Implementation flowchart
In short
Once our player is initialized, we will send a postmessage with the following details (if ?api=true is added to the query parameter of the video)
type | 'documentTrigger' |
triggerName | 'hihaho_ready' |
triggerData | object, {supportsFullscreen: boolean} |
So this event will expose that hihaho is fully loaded, and whether or not fullscreen is supported in the current browser. So in case of iphone, the event with triggerName 'hihaho_ready' will have triggerData with an object key supportsFullscreen with a value of false.
You then have to tell the player that you will handle the full screen events, then we will re-add the fullscreen button.
You can do this by sending a postmessage back (make sure to target it to the iframe contentWindow).
This postmessage should pass this object as value: {'type': 'api_fullscreen_event'}
From that moment the fullscreen button should be visible again in the player.
When the user clicks this button, you have to react to it by making the player emulated fullscreen or close the emulated fullscreen.
You can listen to these events:
type | 'documentTrigger' |
triggerName | 'hihaho_enter_fullscreen' |
triggerData | object, {isSupported: boolean} |
|
|
type | 'documentTrigger' |
triggerName | 'hihaho_exit_fullscreen' |
triggerData | object, {isSupported: boolean} |
As you can see, the fullscreen events will contain triggerData that tells you if native fullscreen is supported. You can ignore these events if native fullscreen is supported, then we will handle the fullscreen action with native full screen. Otherwise you can do your magic 💥✨!
Download our JavaScript API documentation here:
Workaround without JavaScript API
If you're not familiar with javascript API, we recommend to add a full screen button below the video with a link to the embed link.
The embed link will give you a full screen experience. It looks like this: https://player.hihaho.com/embed/42735e18-0e03-4578-9d4a-216778380954
Example
Take a look at https://www.hihaho.com/showcase/car-promotion/ on a mobile for an example.