Таргетинг на определенный идентификатор iframe?

Question

У меня есть страница с несколькими видео на YouTube. Я хочу, чтобы видео воспроизводилось, когда кто-то нажимает на ссылку, соответствующую каждому видео.

Например: когда кто-то нажимает на ссылку видео 2, воспроизводится видео 2.

HTML

   <!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>

<iframe id="ytplayer" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start">Video 1</a>

<br><hr>

<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>

<iframe id="ytplayer2" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start">Video 2</a>

Jquery

    var ytplayer;

function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('ytplayer', {

    });
}

$(document).ready(function () {
    $("#start").click(function () {
        ytplayer.playVideo();
    });
});

ЗДЕСЬ МОЙ JSFIDDLE Только клик на видео 1 работает.

Answer 1

Вот демо, которое работает, как вы ожидали.

Я удалил второй тег script и изменил идентификаторы второго iframe и тегов.

var ytplayer, ytplayer2;

function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('ytplayer', {});
    ytplayer2 = new YT.Player('ytplayer2', {});
}

$(document).ready(function () {
    $("#start").click(function () {
        ytplayer.playVideo();
        return false;
    });
    $("#start2").click(function () {
        ytplayer2.playVideo();
        return false;
    });
});

HTML часть:

<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>

<iframe id="ytplayer" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start">Video 1</a>

<br><hr>

<iframe id="ytplayer2" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start2">Video 2</a>

Надеюсь это поможет.