Restrict Size of Presentation on Screen

[fruitloop]

Hi,

I play in our local brass band and for our concerts and ball we have slideshows/videos/images that get projected behind us.

The problem is that the canvas for the projector is designed for an empty stage, so once we built all the platforms to seat the full band of almost 70 people the space to project on is quite limited.

From the whole canvas about 45% of the bottom are cut off due to the platforms, on the sides there are curtains that block between 2% and 5% and in the top there are moving heads that block a few percent of the space as well.

The last years, I used Apple Keynote, displayed a grid to see what space I can use and restricted everything on the slides to that rather small area.

When I found reveal.js I was wondering if that could maybe solve my Problem.

Can I restrict the slide to a specific space on the screen? I was thinking something like:

position: absolute;
top: 100px;
bottom: 400px;
left: 25px;
right: 75px;

But what element would have to be formatted? It would also be nice if the preview from notes-server would remain "full screen".

That way I could just build the presentation and restrict the space once I see the stage rather than having to build the presentation live on stage a few minutes before we go on stage.

I hope my problem makes sense, Best regards Roland

[fruitloop]

I managed to start this like:

<div class="top"></div>
<div class="left"></div>
<div class="reveal">all the magic happens in here</div>
<div class="right"></div>
<div class="bottom"></div>

and formatted it like that:

/* basics */
div.top { position: absolute; top: 0; left: 0; right: 0; }
div.left { position: absolute; left: 0; top: 0; bottom: 0; }
div.right { position: absolute; right: 0; top: 0; bottom: 0; }
div.bottom { position: absolute; left: 0; bottom: 0; right: 0; }

/* space restrictions */
div.top { height: 20px; }
div.left { width: 50px; }
div.right { width: 75px; }
div.bottom { height: 200px; } 

Now there is just another problem. Now the progress bar, the controls and the slide number are outside of my usable space.

Can I somehow restrict them to be inside the div.reveal?

[fruitloop]

Well actually that did not work since the slides still use all the screen!?

[zyphersworld]

Could you maybe use an iframe? and enable the embed option in Reveal.initialize

[fruitloop]

That would be an iframe in an iframe? However I kinda solved it already. I restricted the div element with CSS. When I'm back at my main computer I'll post an example and close the Issue.

[glfmn]

See #552