Embed YouTube video based on results from API
<p>I am trying to embed YouTube videos into a webpage using the YouTube API. So far I have been able to use the API to gather results based on the search criteria "dog". How would I go about taking those results and turning them into embedded videos. Right now I am getting the results appearing as a JSON file on a index.html page. Also, this only works when my HTML and JavaScript files are hosted on a server, is there a way of doing this locally?</p>

<p>Would appreciate your help, and thank you in advance.</p>

<p>HTML:</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;script src="javascript.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;pre id="response"&gt;&lt;/pre&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>function showResponse(response) {
    var responseString = JSON.stringify(response, '', 2);
    document.getElementById('response').innerHTML += responseString;
}

function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

function onYouTubeApiLoad() {
    gapi.client.setApiKey('API_KEY');

    search();
}

function search() {
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q:"dogs",

    });


    request.execute(onSearchResponse);
}

function onSearchResponse(response) {
    showResponse(response);
}
</code></pre>