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.

So, it is not possible to change background with filmStripOnly:true ?

Is there any workaround?