Using IFrame API, need to refresh page to see Jitsi

I have set up and run IFrame API Jitsi successfully. But, when I go to my web page where it is located, I don’t see this initially:

jitsi1

I have to refresh the page for that image to appear. Is that an IFrame issue?
Here is the code that I’m using:

<div id="meet"></div>

const options = {
    parentNode: document.querySelector('#meet'),
    width: "100%",
    height: "100%",
}
meetAPI = new JitsiMeetExternalAPI("meet.jit.si", options);

Any help with tweaking this so the image appears without having to refresh the page, is appreciated.

One possibility is that the page/DOM hasn’t fully loaded before meetAPI is initialised. Try wrapping your script inside a document ready function.

There is onload hook in iframe api options: IFrame API · Jitsi Meet Handbook

Thank you for that reply. However I don’t know how to wrap inside a document ready function properly. Any additonal help is appreciated

Thanks for that info of “onload hook”. I don’t know exactly how to use that. I tried this without success:

const options = {
    parentNode: document.querySelector('#meet'),
    width: "100%",
    height: "100%",
	onload: window.location.load(true)
}

any help with how to make a proper onload function example, for this scenario, is welcomed

I have tried this:

$( document ).ready(function() {
const options = {
    parentNode: document.querySelector('#meet'),
    width: "100%",
    height: "100%",
}
meetAPI = new JitsiMeetExternalAPI("meet.jit.si", options);
});

I still have to refresh to see that Start Meeting button ( and field).
any additional help is welcomed

Are there any console errors in your browser? Are you able to post the whole page so that we can try to run it?

Thank you for your reply/suggestion.

Yes, I see this in the console:

jquery-3.min.js:2 jQuery.Deferred exception: JitsiMeetExternalAPI is not defined ReferenceError: JitsiMeetExternalAPI is not defined
at HTMLDocument. (:8:1)
at j (https://…/js/jquery-3.min.js:2:29999)
at k (https://…/js/jquery-3.min.js:2:30313) undefined
r.Deferred.exceptionHook @ jquery-3.min.js:2
jquery-3.min.js:2 Uncaught ReferenceError: JitsiMeetExternalAPI is not defined
at HTMLDocument. (:8:1)
at j (jquery-3.min.js:2)
at k (jquery-3.min.js:2)

Any additional help with resolving this error is appreciated