Gallery layouts

Grid, carousel, and fullscreen presentation modes.

image

Preview

Try it in the player

Responsive grid

The grid automatically reduces its column count on tablets and collapses to a single column on phones so thumbnails stay comfortably tappable.

Fullscreen layout

Fullscreen mode is available from the toolbar and responds to the browser's native fullscreen shortcut (F).

Documentation

Three layouts let the viewer adapt to different contexts. Carousel shows one image at a time with a thumbnail strip underneath. Grid displays all images in a responsive grid. Fullscreen fills the viewport for an immersive slideshow. The layout is picked per asset in the dashboard.

Code

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe
    src="https://app.videas.com/embed/019dcfd1-c6e7-76c4-9306-fff87f028620/"
    width="100%" height="100%"
    frameborder="0" allowfullscreen
    allow="fullscreen"
    style="position:absolute;top:0;left:0"
  ></iframe>
</div>

Frequently asked questions

Can a viewer switch layouts at runtime?

With focus on the viewer, pressing <kbd>G</kbd> cycles between grid and carousel. The fullscreen layout is reached via the toolbar toggle.

How do I pick the default layout?

Choose the layout per gallery from the asset settings in the Videas dashboard. A dedicated URL override is on the roadmap.