How to hide jitsi watermark in reactjs

Question

i'm using react-jitsi library for rendering jitsi video

var interfaceConfig = {
   SHOW_BRAND_WATERMARK: true,
   SHOW_WATERMARK_FOR_GUESTS: false,
};

<Jitsi
      // doamin="meet.jit.si"
      roomName={'12345rfewhgresjttyi'}
      displayName={'prakash'}
      password={password}
      interfaceConfig={interfaceConfig}
    />

i tried to hide jisti watermark in background using interfaceConfig. but interface config doesn't affect any UI.

Also i tried with css:

.leftwatermark {
  display: none;
}

This is also not working.

i referred this link for hide watermark

Is there any way to hide the jitsi watermark using reactjs?

i would try to find the exact classname of the parent container of the watermark and add this: `.theclassname { visibility:hidden; display: none; opacity: 0; }` — Thimma, Aug 09 '20 at 15:49
.largeVideoContainer .watermark .leftwatermark this the parent class but css doesn't affect anything — PrakashT, Aug 09 '20 at 15:55
if it's embedded in the video, i dont think there is a way to remove it — Thimma, Aug 09 '20 at 15:57
Remove the file in the server. Is /usr/share/jitsi-meet/images/watermark.png — Miguel Conde, Feb 04 '21 at 20:14

score 4 · Answer 1 · answered Sep 13 '20 at 10:35

SHOW_BRAND_WATERMARK and SHOW_WATERMARK_FOR_GUESTS can not be overwrite by the client and must be in the server config

You must edit the file interface_config.js

sudo nano /usr/share/jitsi-meet/interface_config.js

And switch to

SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,

then, save your file, and restart your browser page.

Be careful, this file can be reset to default when your upgrade Jitsi on your server. The fix is already asked in the roadmap.

score 0 · Answer 2 · answered Aug 09 '20 at 15:50

0

there is no any way of removing the jitsi watermark. but you can remove the link behind it.

answered Aug 09 '20 at 15:50

ajay chawla

63
1
11

score 0 · Answer 3 · edited Oct 01 '21 at 18:56

0

you can change the background-image link in css like below

.leftwatermark {
left: 32px;
top: 32px;
background-position: center left;

background-image: url(your-image-url); } // better view

edited Oct 01 '21 at 18:56

bhaRATh

716
4
23

answered Sep 15 '20 at 12:56

Tajkumar

371
2
4
21

1

You can't change css of an iframe from an outside parent. This won't work. – jizanthapus Nov 04 '20 at 12:19

score 0 · Answer 4 · answered Feb 17 '21 at 16:39

If you need to hide the watermark of the Jitsi meet by using iFrame API, what you have to do is to override these attributes which include in the interface_config.js

SHOW_JITSI_WATERMARK: false,
HIDE_DEEP_LINKING_LOGO: true,
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false

const options = {
    ...
    configOverwrite: { startWithAudioMuted: true },
    interfaceConfigOverwrite: { DISABLE_DOMINANT_SPEAKER_INDICATOR: true },
    ...
};
const api = new JitsiMeetExternalAPI(domain, options);

How to hide jitsi watermark in reactjs

4 Answers4