Clash Royale CLAN TAG

Youtube API wont play when calling player.playVideo()

I'm trying to get a click on .iphone to play a video that I constructed using the youtube API.

It's in theory really simple. Click on .iphone then call function playVid() which executes player.playVideo() which should play the video but it doesn't.

I know I'm missing something so basic and I appreciate any help.

Thanks!

<div class="img">
<div class="iphone-container">
<div class="iphone">
<img src="<?php the_asset_dir() ?>/iphone.png" alt="" srcset="">
<div class="vid">
<div id="player" class="vid-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Uv554B7YHk4?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<img src="<?php the_asset_dir() ?>/section2_image_d.png" alt="" srcset="">
</div>


My JS is below. I am using jQuery to call the function PlayVid() which executes player.PlayVideo() which according to the youtube documentation should in theory play the video but it does not.

var tag = document.createElement('script');
tag.id = 'player';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady
}
});
}

function onPlayerReady(){
$('.iphone').on('click', function(){
console.log("yolo");
playVid() ;
});
}

function playVid() {
player.playVideo();
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.