The main thumbnail elements are as follows:
for the participant thumbs
for the self thumb
By default, these elements share the same styling, meaning that the self thumb and the participants’ thumbs are in the same location, and look the same.
You can configure the positioning of these elements using the .registrationPoint class, applied to
The .registrationPoint configures the position (relative to its parent #selfThumbArea or #participantsArea), upon which the center of the leftmost (or topmost) video thumbnail is centered.
Note: Some extra offset space is required if the containers fill the whole height or width of the view, otherwise part of the thumbnail is drawn offscreen.
For individual styling of self or participant thumbs, provide separate styles for the following:
- #selfThumbArea .registrationPoint
- #participantsArea .registrationPoint.
If you require a vertical layout for participant thumbnails, reduce the width of the #participantsArea container, so that it has a portrait aspect, rather than landscape. If thumbnails include participant names below them, then you need to add extra spacing to accommodate this.