Add text to the top of video screen

Video SDK
1

I would like to add static text to the top of a video call, above the avatars (sorry I can’t attach the mockup).

I’m starting off just using Zoom’s sdk sample. I can’t link to it, but I assume the answer to this question …/t/adding-real-time-text-overlays-in-video-sdk-for-react-native/116664 is very similar to what I want to accomplish. In the video.tsx file, where would I insert this code?

        <View>
          <ZoomView
            style={{ width: '100%', position: 'relative', alignSelf: 'center', height: '100%', flex: 1, justifyContent: 'center' }}
            userId={user.userId}
            fullScreen
            videoAspect={VideoAspect.PanAndScan}
          />
          <Text style={{ zIndex: 100, position: 'absolute', bottom: 0, left: 0, color: 'white', fontSize: 20 }}>YOUR TEXT HERE</Text>
        </View>
2

Hey @AdamG which platform & sample are you using? Is it React Native or Web? Are you using the sample from https://marketplace.zoom.us or GitHub?

I see you mentioned video.tsx so I’m assuming you’re using this file: videosdk-web-sample/src/feature/video/video.tsx at master · zoom/videosdk-web-sample · GitHub, if so you can add this to line 65:

<p style={{ zIndex: 100, position: 'absolute', bottom: 0, left: 0, color: 'red', fontSize: 20 }}>YOUR TEXT HERE</p>
3

Thank you so much for getting back to me! Your guesses were correct. It just wouldn’t let me post code or links since this is my first post.

I tried implementing this, but the changes aren’t showing up. When I inspect the elements in my browser, they’re not there. Any idea what I’m doing wrong?

4

Hey @AdamG, you’ll need so set the position and zIndex at the minimum to get the text to show on top of the video tile. You can set the fontSize and color based on your requirements. I’d suggest copying the exact snippet and making the necessary changes from there.

Screenshot 2024-10-18 at 7.49.55 PM
Screenshot 2024-10-18 at 7.49.55 PM3822×1304 147 KB

http://localhost:3000/video renders the component in src/feature/video/video-attach.tsx. Here’s what my code looks like:

...
//Line 149
return (
  <div
    className={classnames('video-cell', { 'video-cell-spotlight': (user as any).spotlighted })}
    key={user.userId}
    style={...}
  >
{/*  snippet */}
  <p style={{ zIndex: 100, position: 'absolute', }}>YOUR TEXT HERE</p>
  {avatarActionState?.avatarActionState....}
...
6

Wow, thank you! What a dumb setup :slight_smile: Any idea why they do it that way?

I found that the text was still showing up on top of the video. This is what I added to video.scss (and then imported it).

.fixed-text {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
  color: white; /* Text color */
  text-align: center;
  padding: 10px;
  z-index: 1000; /* Ensures it sits above other elements */
}