How can I open a document in fullscreen with Javascript?
I use yumpu js api to embed documents in my pages. For example
var myYumpu = new Yumpu();
document.addEventListener(“DOMContentLoaded”, function(){
myYumpu.create_player(“#myMagazineContainer”, “12345678″, { lang:”de”, singlepageViewOn:”1″, fallback_order:”flash,html5,js” } );
where 12345678 is the document id. This works well.
However, I do not want to show the document embed. I would like to open the document id=12345678 in fullscreen mode when a user clicks on a div container with an icon image. Therefore I cannot use the embed wizard as it creates iframes where I cannot customize the html inside.
Is there any function within the api to do this?
You will be interested in the yumpu js player. Get it from here:
https://players.yumpu.com/hub.js
Examples and a full documentation about the settings are on the official API-documentation, over here: https://developers.yumpu.com/magazine-examples.html
You would put a html container inside your page, let’s say:
<div id="myFullScreenDivID"></div>
Then you could start your yumpu player with the following code (where “12345678” is your magazine id):
myYumpu = new Yumpu();
myYumpu.create_player("#myFullScreenDivID", "12345678" ) {
canvasBGColor : "#808080",
canvasFSBGColor : "#808080",
fallback_order : "flash,html5,js",
isFSOverlay : "1",
c2rText : "",
embedded : true,
lang : "en"
});
To start your fullscreen mode, just use one of the various ways to initialize it, like for example this (with jQuery):
var elem = document.getElementById("myFullScreenDivID");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
$(document).off("webkitfullscreenchange mozfullscreenchange fullscreenchange").on("webkitfullscreenchange mozfullscreenchange fullscreenchange", function(e) {
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
if( typeof state === "undefined" || state !== true ) {
$("#myFullScreenDivID").remove();
}
});
