I'm working on a multimedia project that I want to be embeddable and fullscreenable. I've managed to get it all working OK for desktop browsing, but since Apple has nixed the "fullscreen" API, I've hit something of a wall.
You can see what I'm working with here: http://kevinjbeaty.com/rmnp-100/
It works perfectly on desktop Chrome, Safari, etc, but not so much on Android and not at all on mobile Safari.
The big thing for me here is to make this functionality available within the embed. The manual styling options listed across the web work fine for a fullscreen iframe, but I don't know how to make a trigger like that inside of an embeddable format.
Any workarounds out there?
OK so here's the workaround I came up with. I have still not been able to make any fullscreen conversion happen for my iframe, but the fullscreen javascript operates off of a if/else loop, so I made the final bit of that loop open a new tab with the iframe's source URL, which is fullscreen, so at least I can embed the applet on some webpage and still get people to the full experience.
This is the js:
function expandbutton() {
var docElm = document.getElementById("iframeinsert");
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else {
var form = document.createElement("form");
form.method = "GET";
form.action = "http://eptrail-media.com";
form.target = "_blank";
document.body.appendChild(form);
form.submit();
}
}
If nothing else, it satisfies the need to get fullscreen from an embedded iframe on an ipad or other mobile Safari setup