# Zoom video sdk make host full screen

**URL:** <https://devforum.zoom.us/t/zoom-video-sdk-make-host-full-screen/130817>\
**Category:** Video SDK\
**Tags:** video-sdk\
**Created:** [April 2, 2025, 5:30am UTC](https://devforum.zoom.us/t/zoom-video-sdk-make-host-full-screen/130817 "2025-04-02T05:30:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lido](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/lido/32/68311_2.png) [@Lido](https://devforum.zoom.us/u/Lido)\
**Post date:** [April 2, 2025, 5:30am UTC](https://devforum.zoom.us/t/zoom-video-sdk-make-host-full-screen/130817/1 "2025-04-02T05:30:10Z")

</div>

I am using zoom video sdk in my react Js project where many of user will join the meeting but I want to make only host visible on the full screen for all the other users  
to achieve this I need technical support

---

<div class="post-metadata">

**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\
**Post date:** [April 2, 2025, 11:17am UTC](https://devforum.zoom.us/t/zoom-video-sdk-make-host-full-screen/130817/2 "2025-04-02T11:17:03Z")

</div>

Hi @Lido as I descrbied in this answer: [On the user side, I want to show only the host's video, not any participants or the user themselves - #4 by ekaansh.zoom](https://devforum.zoom.us/t/on-the-user-side-i-want-to-show-only-the-hosts-video-not-any-participants-or-the-user-themselves/130759/4)

You get a `'peer-video-state-change'` event from the [Video SDK](https://developers.zoom.us/docs/video-sdk) for each user. You can decide based on the event which video to render. For example: if you have 7 users with IDs 1-7, if we assume user 1 is the host. Then you can check something like this:

```auto
client.on('peer-video-state-change', (payload) => {
  if (payload.userId === 1) {
  // only if the userId is of the host then render the video
  if (payload.action === 'Start') {
    // a user turned on their video, render it
    stream.attachVideo(payload.userId, 3).then((userVideo) => {
      document.querySelector('video-player-container').appendChild(userVideo)
    })
  } 
...
})

```

For prioritized assistance, you can take advantage of [Premier Developer Support plans](https://explore.zoom.us/en/support-plans/developer/).

---

<div class="post-metadata">

**Author:** ![Lido](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/lido/32/68311_2.png) [@Lido](https://devforum.zoom.us/u/Lido)\
**Post date:** [April 3, 2025, 4:49am UTC](https://devforum.zoom.us/t/zoom-video-sdk-make-host-full-screen/130817/3 "2025-04-03T04:49:54Z")

</div>

@ekaansh.zoom  
I am providing my react code below, can you please guide me how to fit your given solution in my code, Thanks in advance

"  
import { useEffect, useState } from “react”;  
import uitoolkit from “@zoom/videosdk-ui-toolkit”;

const JoinMeeting = ({ }) =\> {  
const [session, setSession] = useState(null);

```
const urlParams = new URLSearchParams(window.location.search);

const token = urlParams.get("token");
const fname = urlParams.get("user");
const sessionNam = urlParams.get("mid");

let sessionContainer = null;

// const [sessionContainer, setSessionContainer] = useState(null);
const [zoomToken, setZoomToken] = useState(token || null);
const [sessionName, setSessionName] = useState(sessionNam || "");
const [sessionPasscode, setSessionPasscode] = useState("");

const firstName = fname;

const hstyle = firstName == "Host" 
    ? { position: 'absolute', width: '100%', height: '100%' }
    : { };

const lastName = "";
// const isHost = stateUser?.userData?.isHost; // Check if user is the host
const [isHost, setIsHost] = useState(fname == "Host" ? true : false); // Check if user is the host
useEffect(() => {
    // setSessionContainer(document.getElementById("sessionContainer"));
}, []);

useEffect(() => {
    if (zoomToken) {
        startClass();
    }
}, [zoomToken]);

const startClass = async () => {
    sessionContainer = document.getElementById("sessionContainer");
    if(!sessionContainer){
        console.error("Session container not found!");
        return;
    }

    const config = {
        videoSDKJWT: zoomToken,
        sessionName: sessionName,
        userName: `${firstName} ${lastName}`,
        sessionPasscode: sessionPasscode,
        features: ["share", "audio", "video"],
        options:{
            video:{
                disableVideo: false, // Allow video
            },
            audio:{
                disableAudio: false, // Allow audio
            },
        },
    };

    try{
        console.log("Attempting to join session...");
        const newSession = await uitoolkit.joinSession(sessionContainer, config);
    
        if(!newSession){
            throw new Error("Session initialization returned null");
        }
        setSession(newSession);

        // Check if the current user is the host
        const user = newSession.getMySelf();
        setIsHost(user?.isHost || false);

        // Wait for session to load
        setTimeout(() => {
            updateView(newSession);
        }, 3000);
    
    }
    catch(error){
        console.error("Failed to initialize session:", error);
    }
};

const updateView = (session) => {
    if (!session) return;

    if(isHost){
        console.log("User is host: Showing all participants.");
    }
    else{
        console.log("User is NOT host: Showing only the host.");
        const users = session.getAllUsers();
        const hostUser = users.find((user) => user.isHost);
    
        if(hostUser){
            session.setFeaturedUser(hostUser.userId);
        }
        else{
            console.error("No host found in the session.");
        }
    }
};

return (
    <div className="App">
        <main>
            <div id="sessionContainer" style={{paddingBottom: '35px'}}></div>
        </main>
    </div>
);

```

};

export default JoinMeeting;  
"

---

<div class="post-metadata">

**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\
**Post date:** [April 3, 2025, 1:29pm UTC](https://devforum.zoom.us/t/zoom-video-sdk-make-host-full-screen/130817/4 "2025-04-03T13:29:07Z")

</div>

Hi @Lido, from your snippet it looks like you’re using the Video SDK UIToolkit. The UIToolkit doesn’t support selectively rendering participants at the moment. I’d suggest you check out the [Video SDK](https://developers.zoom.us/docs/video-sdk/web/video/) instead for your use-case. Here’s an app to get you started quickly: [GitHub - zoom/videosdk-web-helloworld](https://github.com/zoom/videosdk-web-helloworld)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [April 4, 2025, 2:29pm UTC](https://devforum.zoom.us/t/zoom-video-sdk-make-host-full-screen/130817/5 "2025-04-04T14:29:13Z")

</div>

Closed on April 4, 2025, 2:29pm UTC

This topic was automatically closed 25 hours after the last reply. New replies are no longer allowed.