Youtube API在调用player.playVideo()时不会播放

Question

我正试图点击.iphone来播放我使用youtube API构建的视频。

理论上很简单。点击.iphone，然后调用函数playVid((，该函数执行player.playVideo((，它应该播放视频，但它没有。

我知道我错过了一些基本的东西，我很感激任何帮助。

谢谢！

<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>

我的JS在下面。我使用jQuery来调用函数PlayVid((，它执行播放器。根据youtube文档，PlayVideo((理论上应该播放视频，但它没有。

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();
}

Answer 1

尝试删除你的iframe并将你的onYouTubeIframeAPIReady((更改为：

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '8t3EHHhkC34',
playerVars: { enablejsapi: 1, playsinline: 1, origin: 'http://localhost' },
events: {
'onReady': onPlayerReady
}
});
}