Basically my idea is to get the 3 most watched clips of the day from a certain channel, but what I'm not able to do is to customize the player in which they are being "Pulled", since I do not know how to customize the iframe created via javascript.
I used this Twitch API link (bottom of page):
link
And I know that it is possible to do the customization in some way because I saw on this page:
link
For you to have a twitch API key, create an account and register an app empty (very simple): link
In short: I'm trying to customize a part of the Iframe code ( Autoplay, Muted / etc ) via JavaScript because when the page refreshes it comes with mutated video and automatic play, but since I'm still a beginner I'm not aware of this.
My JS code:
var httpRequest = new XMLHttpRequest();
httpRequest.addEventListener('load', clipsLoaded);
httpRequest.open('GET', 'https://api.twitch.tv/kraken/clips/top?
limit=3&channel=imaqtpie&period=day');
httpRequest.setRequestHeader('Client-ID', 'SUA API KEY DA TWITCH AQUI');
httpRequest.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
httpRequest.send();
function clipsLoaded() {
var clipsDisplay = document.getElementById('clips-display'),
clipList = JSON.parse(httpRequest.responseText);
clipList.clips.forEach(function(clip, index, array) {
clipItem = document.createElement('div');
clipItem.className = 'borders';
clipItem.innerHTML = clip.embed_html;
clipsDisplay.appendChild(clipItem);
});
}
My HTML:
<html>
<head>
<title>Random Clips</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="clips-display">
<script src="js/clips.js"></script>
</div>
</body>
</html>
My CSS code (for stylization only, nothing much):
#clips-display {
padding-left: 30%;
}
iframe{
width:650px;
margin: 5px;
}
.borders{
border-style: solid;
border-color: red;
border-width: 2px;
width:660px;
}
