Nmorph UI Kit

Media Tile

Shows a video tile, fallback tile, and loading state for call interfaces.

Nikita Kim

Hidden status

Preparing stream

Fill parent

<script setup lang="ts">
import { NmorphMediaTile } from "@nmorph/nmorph-ui-kit";

const videoSrc =
  "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
</script>

<template>
  <div class="media-tile-basic-usage">
    <NmorphMediaTile
      :src="videoSrc"
      name="Elena Park"
      speaking
      selected
      muted
    />
    <NmorphMediaTile name="Nikita Kim" video-off mic-muted />
    <NmorphMediaTile name="Hidden status" video-off :show-status="false" />
    <NmorphMediaTile loading name="Preparing stream" />
    <div class="media-tile-basic-usage__fill-container">
      <NmorphMediaTile aspect="fill" name="Fill parent" video-off />
    </div>
  </div>
</template>

Basic usage

NmorphMediaTile Api

Attributes

Slots

Expose

Resolution is not supported