Как избавиться от повторения видео на YouTube, даже если указан другой встроенный код?

Question

Я занимаюсь разработкой мобильной веб-страницы, и мне нужно импортировать на нее два видео с YouTube. Когда я нажимаю на это видео, оно должно расшириться и начать воспроизведение. Видео было получено с использованием JavaScript и HTML.

Моя проблема здесь в том, что я закодировал javascript с помощью двух разных встроенных фрагментов кода на YouTube, но он берет видеокод из второго раздела javascript и применяет его к обоим видео. Поэтому, пожалуйста, помогите мне воспроизвести каждое из этих видео на основе встроенного кода.

Вот jsfiddle: http://jsfiddle.net/tJpBY/ и код выглядит следующим образом:

HTML-код:

<div class="container">
    <div class="preview">
        <img class="thumb">
        <img class="play" src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png">
    </div>
</div>
<div class="container">
    <div class="preview1">
        <img class="thumb1">
        <img class="play" src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png">
    </div>
</div>

Javascript код:

var youtube_video_id = "Cgovv8jWETM";
var video_url = "http://youtube.com/watch?v=" + youtube_video_id;
var thumbnail_url = "http://img.youtube.com/vi/" + youtube_video_id + "/1.jpg";
var iframe_url = "http://www.youtube.com/embed/" + youtube_video_id + "?autoplay=1";
var api_url = "https://gdata.youtube.com/feeds/api/videos/" + youtube_video_id + "?  v=2&alt=json-in-script&callback=?";

$(function () {
    // Get video information and set the title.
    $.getJSON(api_url, function (data) {
        $(".info").html("<b><a href='" + video_url + "' target='_blank'>" + data.entry.title.$t + "</a></b>");
    });

    // Set the thumbnail image for the video.
    $(".preview img.thumb").attr("src", thumbnail_url);

    // Switch to the iframe when the image is clicked.
    $(".preview").click(function () {
        $(this).html("<iframe width='400' height='250' src='" + iframe_url + "' frameborder='0' allowfullscreen></iframe>");
        $(this).css("float", "none");
    });
});

var youtube_video_id1 = "rHtVc1asWCc";
var video_url = "http://youtube.com/watch?v=" + youtube_video_id1;
var thumbnail_url = "http://img.youtube.com/vi/" + youtube_video_id1 + "/1.jpg";
var iframe_url = "http://www.youtube.com/embed/" + youtube_video_id1 + "?autoplay=1";
var api_url = "https://gdata.youtube.com/feeds/api/videos/" + youtube_video_id1 + "? v=2&alt=json-in-script&callback=?";

$(function () {
    // Get video information and set the title.
    $.getJSON(api_url, function (data) {
        $(".info").html("<b><a href='" + video_url + "' target='_blank'>" + data.entry.title.$t + "</a></b>");
    });

    // Set the thumbnail image for the video.
    $(".preview img.thumb1").attr("src", thumbnail_url);

    // Switch to the iframe when the image is clicked.
    $(".preview").click(function () {
        $(this).html("<iframe width='400' height='250' src='" + iframe_url + "'  frameborder='0' allowfullscreen></iframe>");
        $(this).css("float", "none");
    });
});

Он отлично работает на jsfiddle, но когда я импортирую один и тот же код в свой проект, одно и то же видео повторяется дважды. Поэтому, пожалуйста, помогите мне решить эту проблему. Заранее спасибо.

Answer 1

Вот один из способов исправить это.

http://jsfiddle.net/tJpBY/2/

Вам в основном нужно переименовать .preview в .preview1,

$('.preview') будет применяться к обоим видео (и все остальное с классом предварительного просмотра). Я также отредактировал немного вашего CSS (добавил Preview1) и исправил ваш неправильно сформированный HTML.

Я переименовал намного больше материала, чем необходимо, поэтому его легче скопировать, что, как кажется, вы делали в первую очередь.