JSFiddle - React, Tailwind, and code Playground

by jj_gutierrez

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<div id="player"></div>
<input type="button" name="shuffle" value="shuffle" onclick="shuffleList();">
<input type="button" name="play" value="play" onclick="playV();">
<input type="button" name="next" value="next" onclick="nextV();">
<input type="button" name="pause" value="pause" onclick="pauseV();">
<div>
<input type="radio" name="loop" value="true" onclick="loopChange(this);"> loop 
<input type="radio" name="loop" value="false" onclick="loopChange(this);"> dont loop 
</div>

JavaScript

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '100%',
        videoId: 'mmmmmmmmm',
        playerVars: {'controls': 0, 'rel':0 },
        events: {
            'onReady': loadPlaylist
        }
    });
}

function loadPlaylist() {
    player.loadPlaylist({
        list: "PLuoduUsV13U9jFN0ptfv_1mjZ_FxsnnzY",
        listType: "playlist",
        index: Math.floor((Math.random() * 15) + 1)
    });
}

function loopChange(thisObj) {
    if(thisObj.value == 'true') {
        player.setLoop(true);
    }
    else {
        player.setLoop(false);
    }
}
function shuffleList() {
    player.setShuffle(true);
}
function pauseV() {
    player.pauseVideo(true);
}
function playV() {
    player.playVideo(true);
}
function nextV() {
    player.nextVideo(true);
}