Delay playback until after user has entered link

I'm trying to make a project where a user can load multiple files at once and play them simultaneously. I want to give the options of uploading a video file, uploading an audio file, and/or entering a YouTube link. The difficulty I'm having is creating a custom play button for the case where they enter a YouTube link, as the play button will need to trigger multiple elements.

I found this codepen for custom play buttons: https://codepen.io/AmrSubZero/pen/oLOYMr

On its own, my code to set an iframe's source based on the url entered works fine, but when I attempt to integrate it here the custom play button ceases working. I think this is the result of onPlayerReady being loaded prior to the source being set. I've made an effort to resolve this based on that premise (calling on player ready after the button to enter the link is clicked) but no luck.

Codepen with the relevant bit of my project added: https://codepen.io/Carousel_/pen/zYpBZvR

HTML

<div class="buttons"><button class="button" id="play-button">PLAY</button><button class="button" id="pause-button">PAUSE</button><button class="button" id="stop-button">STOP</button></div><p class="hideEngine">YouTube Link:<br><input class="hideEngine" id="url" type="url" /></p><iframe id="video" frameborder="0" allowfullscreen></iframe><button type="button" class="mybutton" id="mybutton" onclick="return embed();" >Initialize</button>

JS

    var init = document.getElementById('mybutton');init.addEventListener("click", function(){  onYouTubePlayerAPIReady();  onPlayerReady();});var embed = function(url) {      var url = document.getElementById('url').value     var id = url.split("?v=")[1];     var embedlink = "https://www.youtube.com/embed/" + id +"?enablesjsapi=1";     document.getElementById("video").src = embedlink;}var player;function onYouTubePlayerAPIReady() {    player = new YT.Player('video', {        events: {'onReady': onPlayerReady        }    });}function onPlayerReady(event) {    var playButton = document.getElementById("play-button");    playButton.addEventListener("click", function() {        player.playVideo();    });    var pauseButton = document.getElementById("pause-button");    pauseButton.addEventListener("click", function() {        player.pauseVideo();    });    var stopButton = document.getElementById("stop-button");    stopButton.addEventListener("click", function() {        player.stopVideo();    });}var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Any suggestions would be appreciated! Thanks.