How to remove the black screen part of external_api.js example

I have ran a sample code of external_api.js. code :
var domain = “dev.example.com”;
var options = {
roomName: “JitsiMeetAPIExample”,
width: 700,
height: 500,
parentNode: undefined,
configOverwrite: {},
interfaceConfigOverwrite: {
filmStripOnly: true
}
}
var api = new JitsiMeetExternalAPI(domain, options);

two participants can join the same meeting. but there is a BIG area of black screen. see below picture:

what is that big black area used for ? in my opinion that area should display the large video stream of one of the participant. which function in external_api.js can remove or handle that area ?

set filmStripOnly to false. You’re configured to only show the filmstrip (the video thumbnails).

@Lenny8
thanks for you answers.

Now I want to modify some code to do this:
the user can choose to use Jitsi in Audio only mode. in this case, the filmstriponly will set to false.
when use Video mode, the filmstriponly will show as normal.
I want to try not using the external_API.
if I use the url is like : jitsi.example/<room_name>?audioonly=<true/false>. which js should I modify to handle the parameter audioonly to disalbe/enable filmstrip ?
conference.js or jitsiconferce.js ?

my thought is to add an customized option , maybe like conferenceAudioOnly in the option array
then in conference.js, I can add:
if (!options.startWithVideoMuted
&& !options.startAudioOnly
&& !options.startScreenSharing
&& !options.conferenceAudioOnly ) {
initialDevices.push(‘video’);
requestedVideo = true;
}

but I don’t know which js is used to initialize and manage the option values. do you have any clue ?

I would recommend using existing functionality to configure filmstrip only mode instead of trying to overload startAudioOnly to include toggling filmstrip only mode.

OK thanks dude.