Good morning people, I would like some help, I need to show youtube videos on the site.
This code I used worked, after page load, 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 whole, then adds all the content and only the iframes of the five videos I requested appear.
Can anyone help me with how I can do these videos appear only in a specific section or div without taking full account of the whole site and disappear with all the original content of the page?
Thank you very much for the help, right away!