Tailwind CSS Video Call Layouts Blocks

Video Call Layouts

Video call layouts for active speaker views, participant grids, and multi-person meeting screens.

Full-screen meeting view pairs an active speaker canvas, floating participant sidebar, and persistent speaker label.

<div class="relative size-full bg-[url('https://images.unsplash.com/photo-1682393855864-1b5f97a28620?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                      <span class="absolute bottom-0 inset-s-0 m-2 py-1 px-2 bg-inverse/50 text-xs text-foreground-inverse rounded-lg">
                        Linh
                      </span>

<div class="absolute inset-y-0 inset-e-0 p-2 md:p-3">
                        
                        <div class="h-full flex flex-col gap-y-2 md:my-1 pe-2 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track-inverse [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb-inverse">
                          
                          <button type="button" class="relative size-20 md:w-60 md:h-35 text-start focus:outline-none">
                            <span class="w-full h-20 md:h-35 flex justify-center items-center rounded-xl bg-inverse">
                              <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1713946598534-c5523c97ba60?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                            </span>
                            <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                              <span class="flex justify-between items-center gap-x-2">
                                <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                  Victoria (Mobile)
                                </span>
                                <span class="hidden md:flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>
                                </span>
                              </span>
                            </span>
                          </button>

<button type="button" class="relative size-20 md:w-60 md:h-35 text-start focus:outline-none">
                            <span class="w-full h-20 md:h-35 flex justify-center items-center rounded-xl bg-inverse">
                              <span class="flex shrink-0 justify-center items-center size-10 bg-red-500 text-foreground-inverse rounded-full">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                              </span>
                            </span>
                            <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                              <span class="flex justify-between items-center gap-x-2">
                                <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                  James (You)
                                </span>
                                <span class="hidden md:flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                                </span>
                              </span>
                            </span>
                          </button>

<button type="button" class="relative size-20 md:w-60 md:h-35 text-start focus:outline-none">
                            <span class="w-full h-20 md:h-35 flex justify-center items-center rounded-xl bg-inverse">
                              <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1555421689-3f034debb7a6?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                            </span>
                            <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                              <span class="flex justify-between items-center gap-x-2">
                                <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                  Karchevsky
                                </span>
                                <span class="hidden md:flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>
                                </span>
                              </span>
                            </span>
                          </button>
                          
                        </div>
                        
                      </div>
                    </div>

Two-Participant Video Call Grid Pro

Two-tile call grid combines one live video tile, one avatar fallback tile, participant labels, and audio-status chips.

<div class="size-full grid grid-cols-1 lg:grid-cols-2 grid-rows-2 lg:grid-rows-1 gap-4">
                      
                      <div class="relative size-full bg-[url('https://images.unsplash.com/photo-1682393855864-1b5f97a28620?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                        <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                          <span class="flex justify-between items-center gap-x-2">
                            <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                              Linh
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                            </span>
                          </span>
                        </span>
                      </div>
                      
  
                      
                      <div class="relative size-full rounded-lg bg-inverse">
                        <span class="size-full flex justify-center items-center rounded-xl bg-inverse">
                          <span class="flex shrink-0 justify-center items-center size-20 bg-red-500 text-foreground-inverse rounded-full">
                            <svg class="shrink-0 size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                          </span>
                        </span>

<span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                          <span class="flex justify-between items-center gap-x-2">
                            <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                              James (You)
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                            </span>
                          </span>
                        </span>
                      </div>
                      
                    </div>

Four-Participant Video Call Grid Pro

Four-tile call grid arranges mixed live video and avatar fallback states with participant labels and audio-status chips.

<div class="size-full grid grid-cols-2 grid-rows-2 gap-2 md:gap-4">
                        
                        <div class="relative size-full min-h-0 bg-[url('https://images.unsplash.com/photo-1682393855864-1b5f97a28620?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Linh
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
    
                        
                        <div class="relative size-full min-h-0 rounded-lg bg-inverse">
                          <span class="size-full flex justify-center items-center rounded-xl bg-inverse">
                            <span class="flex shrink-0 justify-center items-center size-14 md:size-20 bg-red-500 text-foreground-inverse rounded-full">
                              <svg class="shrink-0 size-6 md:size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                            </span>
                          </span>
  
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                James (You)
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
  
                        
                        <div class="relative size-full min-h-0 bg-[url('https://images.unsplash.com/photo-1713946598534-c5523c97ba60?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Victoria (Mobile)
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
  
                        
                        <div class="relative size-full min-h-0 bg-[url('https://images.unsplash.com/photo-1555421689-3f034debb7a6?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Karchevsky
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
                      </div>

Six-Participant Video Call Grid Pro

Six-tile call grid expands the meeting view with mixed live video and avatar fallback panels across a balanced layout.

<div class="size-full grid grid-cols-2 lg:grid-cols-3 grid-rows-3 lg:grid-rows-2 gap-2 md:gap-4">
                        
                        <div class="relative size-full min-h-0 bg-[url('https://images.unsplash.com/photo-1682393855864-1b5f97a28620?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Linh
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
    
                        
                        <div class="relative size-full min-h-0 rounded-lg bg-inverse">
                          <span class="size-full flex justify-center items-center rounded-xl bg-inverse">
                            <span class="flex shrink-0 justify-center items-center size-14 md:size-20 bg-red-500 text-foreground-inverse rounded-full">
                              <svg class="shrink-0 size-6 md:size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                            </span>
                          </span>
  
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                James (You)
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
  
                        
                        <div class="relative size-full min-h-0 bg-[url('https://images.unsplash.com/photo-1713946598534-c5523c97ba60?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Victoria (Mobile)
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
  
                        
                        <div class="relative size-full min-h-0 bg-[url('https://images.unsplash.com/photo-1555421689-3f034debb7a6?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Karchevsky
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
  
                        
                        <div class="relative size-full min-h-0 bg-[url('https://images.unsplash.com/photo-1723189042379-3599cd2e9732?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat rounded-lg">
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Brian
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>

<div class="relative size-full min-h-0 rounded-lg bg-inverse">
                          <span class="size-full flex justify-center items-center rounded-xl bg-inverse">
                            <span class="flex shrink-0 justify-center items-center size-14 md:size-20 bg-red-500 text-foreground-inverse rounded-full">
                              <svg class="shrink-0 size-6 md:size-8" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                            </span>
                          </span>
  
                          <span class="absolute bottom-0 inset-x-0 p-1 md:p-2">
                            <span class="flex justify-between items-center gap-x-2">
                              <span class="py-1 px-2 bg-inverse/50 text-xs truncate text-foreground-inverse rounded-lg">
                                Cho Mun Cho
                              </span>
                              <span class="flex shrink-0 justify-center items-center size-6 rounded-full bg-plain/20 text-foreground-inverse">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10v3" /><path d="M6 6v11" /><path d="M10 3v18" /><path d="M14 8v7" /><path d="M18 5v13" /><path d="M22 10v3" /></svg>
                              </span>
                            </span>
                          </span>
                        </div>
                        
                      </div>

Video Call Layouts

Active Speaker Video Call Layout with Participant Sidebar Pro

Two-Participant Video Call Grid Pro

Four-Participant Video Call Grid Pro

Six-Participant Video Call Grid Pro