How to overwrite the default revealjs presentation size on a single slide? How to maximize the content area for images and videos?

[bcm0]

Description

I'd like to make the content area of a single slide larger than the default presentation width of 1050px.

Here's a small example of the behaviour I'm looking for

## Slide Title {background-video="video.mp4" background-size="contain"}

How can I put the video within the content of a slide, but maximise it so it behaves like the background video in the example?
One possible solution would be to override the default presentation size, but only for a single slide. Is this possible?
I tried absolute positioning, but width and height are limited by the default presentation size.

I'm a quarto beginner and revealjs is very challenging to me. Sometimes my content gets cut off because there's too much text on a slide. Sometimes I can't make the content big enough, when I like it to exceed the predefined slide size.
I'd really appreciate it if you could share your knowledge with me.

https://quarto.org/docs/presentations/revealjs/advanced.html#presentation-size
https://quarto.org/docs/presentations/revealjs/#video-backgrounds
https://quarto.org/docs/authoring/videos.html#revealjs

[jimjam-slam]

I'm not sure if overriding a single slide's size makes sense in the context of Reveal. Reveal already scales content up or down to the size of the window, so the presentation size attribute is really more so that you have a baseline for scaling your own elements that can't naturally be responsive.

Part of the reason Reveal does this is to maintain the aspect ratio of the slides. If your slides are 16:9 (widescreen), for example, and you open them in a tall window, the slides get "letterboxed" (space above and below) with empty space.

The background video functionality is the primary way around that, letting content fill the background area. Here's a screenshot one of my presentations: inside .reveal, there's .slides, where all the content goes, and .backgrounds, where backgrounds are sent to. You can see that the content in .slides (which is highlighted) is limited to a scaled area in the middle.

If you want to use absolute positioning to have some content extend beyond that, it might work, but you might also find that Reveal's scaling math messes with it. Try something like:

.my-content {
  position: absolute;
  top: 0;
  left: 0;
  // you might need to use `calc(100vw - some amount)` for width or
  // height if your content has borders,padding or margins
  width: 100vw;
  height: 100dvh;
}

I can't be sure whether it'll work without trying it, but generally, if you can use the built-in video background functionality, you'll have a much better time!