Javascript 点击缩略图播放youtube视频

我正在使用移动设备（iOS），我想点击缩略图启动youtube视频。在iOS设备上，视频以全屏显示

我正在使用iframe，但我只想使用图像：

<iframe id="ytplayer" type="text/html" width="120" height="100" src="http://www.youtube.com/embed/'+id+'?hd=1&rel=0&autohide=1&showinfo=0" frameborder="0"/>

我该怎么做

---

谢谢

缩略图的URL是可预测的：

有关更多详细信息，请参阅此答案：

您的HTML：

<iframe id="ytplayer" type="text/html" width="120" height="100"  
src="http://www.youtube.com/embed/'+id+'?hd=1&rel=0&autohide=1&showinfo=0" 
frameborder="0"/>

工作示例：

如您所见，向

src

添加参数：

&enablejsapi=1

非常重要

此外，通过播放器的初始化传递

视频id

也无法正常工作

你想要实现的目标

您想要实现的是通过单击图像（至少在我理解正确的情况下）启动视频。 正如您在

JsFiddle

中看到的，我现在创建了一个

play

按钮来启动视频。现在，您可以替换图像或任何您想要初始化视频的内容

我希望这对你有帮助

---

祝你好运

谢谢，我知道！我只想举一个例子，比如：我点击一个图像（缩略图或不是缩略图），然后在我的iOS设备上启动我的youtube视频。我想这是因为JSFIDLE关闭了：（@adibouf:JSFIDLE再次启动。再试一次；）你能检查我的新问题吗

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      height: '200',
      width: '200',
      playerVars: { 'autoplay': 1, 'controls': 0 },
      events: {
        'onReady': onPlayerReady
      }
    });
}

function onPlayerReady(event){
  event.target.playVideo();
    $("#play").on('click', function() {
      player.playVideo();
    });
    $("#pause").on('click', function() {
      player.stopVideo();
    });
}