First off, this template is awesome! Since my work is shared in corporate environments, my testing showed that the fullscreen buttons weren’t working in IE. I was able to add IE functions to get the buttons in the document to work. (It’s interesting because they use some different syntax and have differences in the case-sensitivity.)
However, when fullscreen is toggled in IE, the HYPE content doesn’t scale to fill the screen. In fact, it resets to the native doc size. Any thoughts? test.hype.zip (682.2 KB)
In Safari user scaling is fine and you can just pinch and out to scale. In Firefox, when I press cmd +/- the browser is telling me that the content is scaled but nothing happens.
Maybe it’s a Firefox stuff.
Actually, I just tried right now on firefox and full screen is working when using the buttons on screen.
Please, use template associated with the post that says "Problem solved.
Enclosed is a template for allowing a project to adapt its size to window size and to allow toggle fullscreen display. "
Yes the ‘full screen’ mode works fine and I tested it on many screens and devices. It works perfectly! The problem is with user scaling when I want to zoom in and out. It works in Safari (try pinching in and out on a trackpad or use cmd +/-) but it doesn’t work in Firefox.
The template works fine, but as soon I try to get the background rectangle (or any image) flexible to fill witdth and height, the page loads in a bigger size the first time. If you resize the browser window or press any of the fullscreen buttons, the page recover the flexible layout. Any ideas if this can be fixed?
Attached is my modified template
Many thanks! fullscreenflexible.hype.zip (24.7 KB)
So I have been using this template for a while now but now I noticed that it messes up video controls on Safari. Video controls do not show up. Is there any fix for that?
Are you using an external service? (If you can share a link that would be great)
If you’re using an external hosting service that uses iframes, you may need to ensure you have the allowfullscreen option in place: https://www.allowfullscreen.com
Very nice project @kerguelen! Maybe this will be very helpful to me. I want to make something close to it but with videos.
I'm wondering can I use the "exitFullscreenWorks" code to close video after it finished? Something like this:
var video = hypeDocument.getElementById('video1');
video.onended = function(e) {
if (document.exitFullscreen) {
document.exitFullscreen();}else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();}else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();}
But maybe I'm getting wrong somewhere with the syntax because it not works...
Unless it was a paste issue, you are missing a } at the end to close the function. Otherwise it works with HTML5 video for me, but as @kerguelen suggests may not work with other videos that occur within an embed/iframe.
You gave the video a unique element ID of video3 but the code references video1. You should change them to match.
Nothing triggers the untitledFunction() that adds the onended handler for the video. You should setup an On Scene Load handler to Run JavaScript that is set to this function.