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 Layout and Design tabs where every look is set per screen, and the player.

The editor, tab by tab

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. Layout is slider or grid, scaling and rows, and any titles, text and buttons you add, each placed exactly with the sliders under Where it sits. Design is every look: theme, title, channel icons, tabs, the video card, arrows, the player. 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

1. 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.
2. 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.
3. Put the tabs in the order you want. Drag a tab by its panel. The others move aside as you drag, and the preview follows along.
4. Hide a single video without deleting it. Each source has a panel that opens and closes, with a switch beside every video. Switch one off and it stays in your list but leaves the widget. Refresh a source to fetch its newest videos; Delete a source to take it and everything it brought out of the tab.
5. Removing a tab asks you first. A message then appears at the corner of the screen with an Undo, in case you change your mind.

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, colors at rest and on hover, a transparent shape with or without an outline.
• A "Load more" button in your own words, font, weight, colors, 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, color, hover color, and the underline under the selected tab with its own color.
• Title (above tabs). Words, font, weight, size, letter spacing, color, alignment, and the space below.
• Social Links. 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 colors or a color of your choice, a hover color, a custom logo of your own, and the size and spacing.
• Navigation arrows. Size, vertical position, and the four colors, with a bare arrow when the shape is transparent.
• Theme. Dark or light, an accent color, and a background that matches the theme, is a color of yours, or is transparent to sit on your page.
• Video card. Title, date, description, views and durations, each on or off; with the card's Normal | Hover switch on Hover, the ones you tick show only when a card is pointed at. Corner radius and padding too.

Per screen

Every setting in Layout and Design is kept for Desktop and Mobile separately, and the switch above the preview chooses which you are editing. A tablet is drawn from Desktop. 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. See both above the preview shows the two side by side before you publish.

Publishing and the embed code

1. Press Publish changes. The button at the top right says Publish changes while you have something to publish and Published when the live widget is what you see. Pressing it lists what you changed and asks once: Publish sends it, Keep editing goes back.
2. Copy the code. The window that says Your widget is live has your embed code with a Copy code button, the steps for your website builder, and Copy instructions for someone else if another person looks after your site. The same code is on the Settings tab under Copy embed code, and on the dashboard as Copy embed on the widget's card.
3. Paste it once. Paste the code where the videos should appear. It is one short code, an iframe and a small script together; keep all of it, because the script keeps the frame as tall as the widget and lifts the player over your page. A page that already has the code picks up each later publish within a minute, with nothing to paste again. Embedding on your site and the install guides for 49 platforms show where to paste it.

If you started building without an account, publishing first asks you to create a free one, and the widget you built comes with you.