PreziPlayer Attributes... Width vs Height when using percentages

93 views
Skip to first unread message

Kyle Morgan

unread,
Aug 10, 2013, 1:25:33 AM8/10/13
to prezipl...@googlegroups.com
Hey everyone,
 
I came across the Prezi JavaScript api while trying to look up ways of integrating Prezi with a Leap device and I have a question regarding the attributes when creating the PreziPlayer.  Having a width of 100% works as expected (code sample 1) but when setting a height value that contains a percent sign, it seems to ignore the value and default to 150px high (code sample 2).  I'd like to forgo the controls and make the height based on a scale factor of the browser (as I'm controlling navigation with the Leap Motion device) but will work around this by having the controls available to go full-screen.
 
Code Sample 1 (working)
player = new PreziPlayer('prezi-player', {
  preziId
: preziId,
  explorable
: false,
  controls
: true,
  width
: "100%",
  height
: "720",
  debug
: false
});
 
Code Sample 2 (broken)
player = new PreziPlayer('prezi-player', {
  preziId: preziId,
  explorable: false,
  controls: true,
  width: "100%",
  height: "90%",
  debug: false
});
 
 
Thanks everyone!

Andras Barthazi

unread,
Aug 11, 2013, 2:30:20 PM8/11/13
to Kyle Morgan, prezipl...@googlegroups.com
Hey Kyle,

Leap sounds cool! The height value sets the iframe of the embedded prezi's height to 100%, but that not really working. You can query the browser window's viewport size and set that value:

player = new PreziPlayer('prezi-player', {
  preziId: preziId,
  explorable: false,
  controls: true,
  width: "100%",
  height: document.documentElement.clientHeight,
  debug: false
});

Hope this helps,
  Andras


--
Visit our website at http://prezi.github.io/prezi-player/ for detailed documentation and examples
---
You received this message because you are subscribed to the Google Groups "Prezi Player API Development Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to preziplayer-d...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.



--

Andras Barthazi
Lead engineer at Prezi

Kyle Morgan

unread,
Aug 11, 2013, 4:12:59 PM8/11/13
to Andras Barthazi, prezipl...@googlegroups.com
It's very cool! Here is a quick video of what I was able to put together... Will try your trick at a later time. 

magic.co...@gmail.com

unread,
Apr 2, 2016, 12:28:51 AM4/2/16
to Prezi Player API Development Talk, andras....@prezi.com
Client Height fixed the initial load, but on resizing it stays the original height.  Any ideas on how to get it to be responsive?
To unsubscribe from this group and stop receiving emails from it, send an email to preziplayer-dev+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
Reply all
Reply to author
Forward
0 new messages