Skip to main content

dyte-participant-tile

A component which plays a participants video and allows for placement of components like dyte-name-tag, dyte-audio-visualizer or any other component.

<dyte-participant-tile class="dyte-el">
  <dyte-name-tag class="dyte-el">
    <dyte-audio-visualizer class="dyte-el" slot="start"></dyte-audio-visualizer>
  </dyte-name-tag>
</dyte-participant-tile>

<script>
  const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.participant = meeting.self;
  }
</script>

You can change the name-tag-position to any of the supported values and change the placement of audio-visualizer in name-tag as well.

<dyte-participant-tile class="dyte-el" name-tag-position="bottom-center">
  <dyte-name-tag class="dyte-el">
    <dyte-audio-visualizer class="dyte-el" slot="end"></dyte-audio-visualizer>
  </dyte-name-tag>
</dyte-participant-tile>

<script>
  const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.participant = meeting.self;
  }
</script>

It also has a few variants.

<dyte-participant-tile class="dyte-el" variant="gradient">
  <dyte-name-tag class="dyte-el">
    <dyte-audio-visualizer class="dyte-el" slot="start"></dyte-audio-visualizer>
  </dyte-name-tag>
</dyte-participant-tile>

<script>
  const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.participant = meeting.self;
  }
</script>

Props​

participant

required

Participant object

config

Config object

Default
defaultConfig

iconPack

Icon pack

Default
defaultIconPack

isPreview

Whether tile is used for preview

Default
false
Type
boolean

meeting

Meeting object

nameTagPosition

Position of name tag

Default
'bottom-left'
Type
"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()

variant

Variant

Default
'solid'
Type
"gradient" | "solid"