Question

I am developing a mobile webpage and I have to import two youtube videos on it. The video has to expand and start playing when I click on that video. The video has been attained using javascript and html.

My problem here is that I have coded the javascript with 2 different embedded youtube code snippets but it takes the video code of the second section of javascript and applies it to both the videos. So please help me to make each of these videos play their respective video based on the embedded code.

Here is the jsfiddle: http://jsfiddle.net/tJpBY/ and the code is as follows:

HTML Code:

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

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

It is working fine on jsfiddle, but when I import the same code in my project, the same video is repeated twice. So please help me to resolve this issue. Thanks in advance.

Answer 1

Here’s one way to fix it.

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

You basically need to rename .preview to .preview1.

$('.preview') will apply to both videos (and everything else with a class of preview). I also edited a bit of your css (added preview1) and fixed your malformed html.

I renamed a lot more stuff than necessary so its easier to copy paste which is what it seems like you were doing in the first place.