Video Showcase
Tabs, layouts, rows and the player
A Video Showcase is a set of tabs, each a list of sources, drawn as a slider or a grid, with every video playing in its own platform's player over your page. This guide walks the editor: the Videos panel where the tabs are built, the Design panel where every look is set per screen, and the player.
The editor, in three panels
Videos is where the tabs are built: add a source as a new tab, add more sources to a tab, reorder tabs by dragging, hide a video, delete a source. Design is every look: tabs, title, channel icons, scaling, layout, rows, arrows, theme, card fields. Settings holds the name, the embed code and your YouTube API key if you have one. Every card has an Undo for its last ten changes; the preview shows the whole widget at the real size of the screen chosen above it, and follows the tab you are editing.
Tabs and sources
- Add a source as a new tab. Choose the platform, paste a channel, playlist, showcase or TikTok links, click Add as a tab. The tab takes the channel's name; rename it in its block. What to paste for each platform is in Vimeo, Twitch and TikTok.
- Mix platforms in one tab. Every tab has its own Add box, and a tab can hold YouTube and Vimeo and Twitch and TikTok together.
- Reorder by dragging a tab's block; the others move aside as you drag and the preview follows.
- Hide one video with the switch in its source's fold; it stays in the list and out of the widget. Refresh a source to fetch its newest videos; Delete a source to take it and everything it brought out of the tab.
- Remove a tab and it asks first; the toast that follows has an Undo.
Max videos per tab caps how many a source brings. YouTube's free feed stops at fifteen; your own key lifts that to fifty.
Slider or grid
Slider / Carousel draws one row of cards with arrows, swipe and a drag, and either one carousel with tabs to switch between them or every tab as its own carousel, one below another (stacked). Grid draws cards in Columns with a Gap; the Scaling card sets the ideal card width the columns are worked out from.
Rows, and what happens past them
On a grid, Rows limits how many rows are shown at first, per screen. Past those rows, choose:
- Pages, turned with arrows, dots or a swipe.
- A down arrow that adds as many rows again each time it is pressed, styled in the Down arrow card: size, shape, colours at rest and on hover, a transparent shape with or without an outline.
- A "Load more" button in your own words, font, weight, colours, outline and corner radius, adding as many rows again per press.
The player
Playing a card opens the video in its own platform's player, over your page, at the largest size the page allows, and starts it. Escape, the close button or a click outside closes it. Nothing about your page's layout changes while it is open, and nobody is sent to another site. Every card can be reached with the keyboard: Tab to it, Enter or Space to play.
Design, card by card
- Tabs. Font, weight, size, letter spacing, colour, hover colour, and the underline under the selected tab with its own colour.
- Title (above tabs). Words, font, weight, size, letter spacing, colour, alignment, and the space below.
- Channel icons. The mark of every platform you are on, in the tab bar: far right, before or after the tabs; each linking to your page; brand colours or a colour of your choice, a hover colour, a custom logo of your own, and the size and spacing.
- Navigation arrows. Size, vertical position, and the four colours, with a bare arrow when the shape is transparent.
- Theme. Dark or light, an accent colour, and a background that matches the theme, is a colour of yours, or is transparent to sit on your page.
- Card fields. Title, date, description and views, each on or off; corner radius; padding.
Per screen
Every setting in Design is kept for desktop, tablet and phone separately, and the switch above the preview chooses which you are editing. The videos and tabs are shared. A grid can be four columns on a monitor and one on a phone, with its own rows on each.