!important update: October 2020

CSS Grid is only recommended for 1:1 video calls. If you're building a video call interface from scratch for more participants, learn how to build a completely custom call experience using the Daily call object.

Ways to build with Daily

Designers, developers and product teams can choose the approach to building with Daily that fits their goals:

  1. Prebuilt widget: Rapidly embed a finished video chat widget. Simply add an iframe to your site using helper methods in our javascript front-end library.
  2. Custom layout: Customize any video chat — both small and large calls — with what we call object mode. See our React tutorial.
  3. 1:1 CSS Grid support: Work on 1:1 video chat your own CSS and HTML. This means that you can customize the styling of interface elements. Heads up: it's not as robust as call object custom UIs.

This post walks through using CSS Grid, which, again is not recommended for video calls with more than two 1:1 participants.

What does a CSS Grid Daily call look like?

To help illustrate what's possible, here is a screenshot of a demo we built using CSS Grid Layouts. Check out the live demo in your browser, now.

Custom layout demo
Custom layout demo created using CSS Grid Layout

Getting started

Here are some quick links to help you get learn more about this demo and custom layout control.

Whether your a well-versed front-end engineer or a designer with some basic CSS knowledge you should be able to customize the UI of your video calls. That said, basic CSS and HTML knowledge are required.

About CSS Grid

CSS grid is a very powerful layout property that allows you to layout elements on a 2-dimensional grid. For a detailed overview, check out CSS Tricks excellent guide. Essentially, you create a grid (your container) and then define where elements (i.e. a div) are placed on the grid.

Creating the CSS Grid Demo

The files for this demo live in our daily-js repo. Specifically, you'll want to check out the demo-css-grid.html and demo-css-grid.css files.

Styling the demo

The demo-css-grid.css file is the file we used to style the video call elements. These elements, or components, are what are embedded in the calls iframe.

For example in the CSS file, .daily-videos-wrapper is the grid container and .daily-video-div is a video feed element.

Creating the grid

Before we began we designed our UI in Sketch so that we could plan for our implementation.

From here we had a grid we could work off of. Defining the grid container was then as simple as updating the .daily-videos-wrapper class with the following:

.daily-videos-wrapper {
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 0.5fr);
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

If you inspect the live demo you'll see the following grid overlaid by your browser.

CSS Grid overlay when inspecting demo
CSS Grid overlay when inspecting demo

The grid is created using grid-template-rows and grid-template-columns. The values for each property generate a grid with 2 rows and 4 columns from which we will then place our UI elements in.

For more information on how to use the fr unit check out this great post from Alligator.io.

Positioning an element on the grid

As an example, let's look at how we positioned the local video feed.

To begin we target the .daily-video-div.local class. We use grid-area to define where on the grid this element is placed.

.daily-video-div.local {
    grid-area: 1 / 1 / span 1 / span 2;
}

This code is shorthand for the following:

.daily-video-div.local {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: span 1;
  grid-column-end: span 2;
}
  • Row (and column) start is set to 1: This tells the browser to "start" placing the UI on the first row (and column).
  • Row end is set to span 1: The UI only fills (spans) one row; which in this case, is the first row.
  • Column end is set to span 2: The UI will fill (span) two columns. Column 1 and 2.

To better visualize this see the illustration below. The cyan rectangle represents the local video feed UI. You can see that it is positioned in our grid to fill the first two columns that intersect the first row.

An illustration of local video feed grid area
An illustration of local video feed grid area

There are many different ways to define where UI may be positioned on the grid. For example, you can name the areas of your grid using the grid-template-areas property — learn more on CSS Tricks — or you can name the lines of your grid and then position your UI elements accordingly.

Further, items can be placed over one another or across similar areas.

Responsive design

CSS grid makes responsive implemenation quite a breeze!

We use the same logic as above to reposition components for smaller breakpoints. For the purpose of this demo, we simply target one media query, @media (max-width: 800px) { … }, and have added styling as needed to each element.

Controller and informational overlays

In order to add in-call controls — camera, microphone, leave, etc. — to the video call, we've customized the demo-css-grid.html file.

Think of this file as your the video call experience in your product. This is the bones of the video call controller plus the call elements itself, which are rendered as an iframe.

To add the controller and participant UI shown in the demo, as well as the "Loading your video feed…" overlay, we essentially duplicated the grid layout from the demo-css-grid.css file so that we could position our controller elements appropriately.

In the demo-css-grid.html file:

  • Line 137: #ui-container creates the grid container
  • Line 138: #ui-local creates the "Loading your video feed…" overlay
  • Line 143: #ui-controller adds the in-call controls for camera, microphone, screen share and leave/join

Again, you can use media queries to reposition elements in your grid layout, at different breakpoints. As we've done for the #ui-controller element.

Further customization

Going a level deeper, we wrote some functions to update the ID's of elements based upon different states in a meeting. For example, when you are alone we have a function that allows us to display UI specific to that scenario.

You can customize your experience as needed.

Customizing your interface with CSS Grid Layouts offers developers a lot of flexibility. You can even utilize Flexbox Layout and/or standard positioning, in conjunction with Grid Layout, for even more control over your UX.

As always, it helps to start building with a design or plan in place. We first designed our UI in Sketch in order to have a solid starting place from which to implement.

If you have any other questions about CSS Grid please do not hesitate to reach out! We are very excited to see what folks will create using the Daily API, and are proud to offer custom layout control.