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(); } });