One of my recent achievements includes creating a webpage that displays a list of loaded data, some of which contain YouTube links.
I am currently facing a challenge in trying to showcase these videos in a bootstrap carousel due to the complexity of integrating it with the JavaScript I've implemented. To see the full demonstration, please visit: http://jsfiddle.net/cpoxy235/
Here is an overview of the HTML structure:
<html>
<body>
<h6>Youtube</h6>
<div class="list-group container" id="ytgroup"></div>
<h6>Articles</h6>
<div class="list-group container" id="argroup"></div>
</body>
</html>
And here is a snippet of the JavaScript used for fetching and displaying the YouTube videos and articles:
var data = [{
"title": "Ligo First Light",
...
}];
function getArrayByName(name) {
return data.filter(
function(item) {
return item[name];
}
)[0][name];
}
var youtube = getArrayByName('youtube');
var article = getArrayByName('articles');
// Code block for appending YouTube videos
for (var r in youtube) {
var tag = document.createElement("div");
var text = document.createTextNode(youtube[r].url);
tag.appendChild(text);
var element = document.getElementById("ytgroup");
element.appendChild(tag);
}
// Code block for displaying article URLs
for (var r in article) {
var tag = document.createElement("p");
var text = document.createTextNode(article[r].url);
tag.appendChild(text);
var element = document.getElementById("argroup");
element.appendChild(tag);
}
Although not included in the fiddle provided, I have prepared a sample of the carousel setup as follows:
<div class="carousel-inner">
<div class="carousel-item active">
<div class="media border p-3">
<div class="media-body" align="center">
<iframe width="320" height="240" src="https://www.youtube.com/embed/PJ_GI4jdpfE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
...
</div>