JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<h1>Vimeo Simple API Example</h1>
<div id="stats"></div>
<div id="thumbs">Loading videos...</div>

<video src="vimeo" id="47191650" data-protocol="https" width="640" height="360" controls="1ab7ea"></video>

JavaScript

var vimeoUserName = 'brad',
    callback = 'showThumbs',
    url = 'http://vimeo.com/api/v2/' + vimeoUserName + '/videos.json?callback=' + callback;

function init() {
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', url);
    document.getElementsByTagName('head').item(0).appendChild(js);
}

function showThumbs(videos) {
    var thumbs = document.getElementById('thumbs');
    thumbs.innerHTML = '';

    for (var i = 8; i < videos.length; i++) {
        var thumb = document.createElement('img');
        thumb.setAttribute('src', videos[i].thumbnail_medium);
        thumb.setAttribute('alt', videos[i].title);
        thumb.setAttribute('title', videos[i].title);

        var a = document.createElement('a');
        a.setAttribute('href', videos[i].url);
        a.appendChild(document.createTextNode(videos[i].title));

        var p = document.createElement('p');
        p.appendChild(thumb);
        p.appendChild(document.createElement('br'));
        p.appendChild(a);
        thumbs.appendChild(p);
    }
}

window.onload = init;