Iframe - View youtube videos

Question

Good morning guys, I would like a help, I need to display latest videos from the youtube channel on the site.

This code I used worked, after loading the page, it displays the last five videos:

<div class="video">
                <script>
                    var htmlString = "";
                    var apiKey = 'minhaAPI'; //https://console.developers.google.com
                    var channelID = 'MeuCanal';
                    var maxResults = 999;

                    $.getJSON('https://www.googleapis.com/youtube/v3/search?key=' + apiKey + '&channelId=' + channelID + '&part=snippet,id&order=date&maxResults=' + (maxResults > 1 ? 5: maxResults), function(data) {
                        $.each(data.items, function(i, item) {
                            var videoID = item['id']['videoId'];
                            var title = item['snippet']['title'];
                            var videoEmbed = "https://www.youtube.com/embed/" + videoID;
                            htmlString += '<iframe width="100%" height="400" src="' + videoEmbed + '" frameborder="0" allowfullscreen></iframe>';
                        });
                        $('.video').html(htmlString);
                    });
                </script>
            </div>

However, the following happens::

The page loads full, then add all the content and only appear the iframes of the five videos I requested.

Could someone help me on how I can make these videos appear only in a specific Section or Div, without taking over the entire site, and disappear with all the original content of the page?

Thank you so much for your help!