Jitsi Meet: How to display names

December 31, 2020

2022-03 update: This post is now obsolete. Current versions of Jitsi Meet now display participants' names as expected. I am leaving this post up because it may provide hints as to how to customise the display of your Jitsi instance.

When using the tile view in a Jitsi Meet video-conference, I find it annoying that you cannot see people's names unless you hover over the person's tile with the mouse cursor.

I mean, it is OK for a 5-person conference where you know everybody, but when communicating with 20 people at once it is nice to be able to tell who is who at a glance. Hovering over thumbnails is not very practical.

I don't understand why Jitsi Meet does not make names visible at all times. It would be nice if it was at least a server setting. Alas it is not.

But all hope is not lost: there is an easy way to enable permanent name display without having to rebuild Jitsi Meet. All it takes is a couple of CSS file edits on the server:

1. Edit the file `/usr/share/jitsi-meet/body.html` and add the line:

<link rel="stylesheet" href="css/custom.css?v=1">

The file body.html is empty on a stock Jitsi Meet installation. If it already has content, just add the line somewhere at the beginning or at the end.

Paths are based on a Debian/Ubuntu installation. Other distros may have a different directory structure.

2. Create the file `/usr/share/jitsi/meet/css/custom.css` and populate it with the following code:

#alwaysOnTop .displayname,
.videocontainer .displayname,
.videocontainer .editdisplayname {
        position: absolute;
        bottom: 2%;
        top: auto;
        left: 5px;
        width: auto;

        background-color: rgba(24, 24, 24, .66);
        color: #fff;
        text-shadow: 1px 1px #111111;

        padding: 4px 8px 4px 8px;
        border-radius: 5px;

        text-align: left;
        text-overflow: ellipsis;
        font-size: larger;
        font-weight: normal;
}

.vertical-filmstrip .displayname,
.vertical-filmstrip .editdisplayname {
        bottom: 2%;
        left: 2px;
        width: calc(100% - 8px);

        padding: 0px 3px 0px 3px;
        border-radius: 0px;

        font-size: small;
        font-weight: normal;
}

.display-video .displayNameContainer {
        /* visibility: hidden */
        visibility: visible;;
}

.display-name-on-video .avatar-container {
        /* visibility: hidden */
        visibility: visible;
}

.display-avatar-only .displayNameContainer {
        /* visibility: hidden */
        visibility: visible;
}

Once the files are saved, you are done: nothing to rebuild, nothing to compile, nothing to restart. Just refresh the page in your browser and the CSS change should take effect immediately.

This trick will only work with web clients, but I guess mobile app users wouldn't benefit much from it anyway, given the reduced display area and the already crippled mobile tile view.

References: