Adding calls to the api breaks my page

I have been trying to resolve this for weeks now, hopefully someone can save my sanity. I have enbedded a room within my site and all is working fine until I try to add and further calls to the api. As soon as I add a further call to the JitsiMeetExternalAPI the room fails to load. For example adding

api.executeCommand('password', 'The Password');

Lookking in console there is no error. The code I have working:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="https://grandslammerz.net/templates/tmpl_mastero/css/jitsi.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://meet.jit.si/external_api.js"></script>
    <script> function getQueryVariable(variable)
    {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
    }
    </script>
    <script>
    $(document).ready(function(){
            var user = getQueryVariable("userName");
            var domain = "meet.jit.si";
    	var options = {
    		roomName: "SundaySunday",
    		width: "80%",
            height: "500px",
            parentNode: document.querySelector('#meet'),
    		lockRoomGuestEnabled: true,
    	}
    	
    var api = new JitsiMeetExternalAPI(domain, options);
    api.executeCommand('displayName', user);
    });
    </script>
    <title>Video Chat</title>
    </head>
    <body>
    </body>
    </html>

I know its gonna be somewthing simple and I’ll look like a fool, but at this stage i dont mind.
Thanks guys