Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

How to fix my problem? I looked at the answers to this question on the forum but could not solve the problem.

<script type="text/javascript">
    const api = 'AIzaSyAZaaaXmvFvvvWkZ2bfffbz1oCAqvgSVOGYg'; // Specify your api key here

    // Load API library
    function onLoad() {
        if (api) {
            gapi.client.load('youtube', 'v3', loadYouTubeApi);
        } else {
            document.getElementById('output').innerHTML += 'API key has not been specified!';
        }
    }

    // Set API Key
    function loadYouTubeApi() {
        gapi.client.setApiKey(api);
        search('sitepoint');
    }

    // Call the search.list()
    function search(queryTerm) {
        let request = gapi.client.youtube.search.list({
            part: 'id',
            q: queryTerm
        });
        // Execute the request call and output it in HTML view
        request.execute((response) => {
            const responseString = JSON.stringify(response, '', 2);
            document.getElementById('output').innerHTML += responseString;
        })
    }
</script>
<script src="https://apis.google.com/js/client.js?onload=onLoad" type="text/javascript"></script>