Javascript 即使给出了不同的嵌入代码，如何避免youtube视频重复？

我正在开发一个移动网页，我必须在上面导入两个youtube视频。当我点击视频时，视频必须展开并开始播放。视频是使用javascript和html实现的

我这里的问题是，我用两个不同的嵌入youtube的代码片段对javascript进行了编码，但它采用了javascript第二部分的视频代码，并将其应用于这两个视频。因此，请帮助我使这些视频播放各自的视频基于嵌入式代码

下面是jsfiddle:代码如下：

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>

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

Javascript代码：

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

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

var youtube\u video\u id=“Cgovv8jWETM”；
var video_url=”http://youtube.com/watch?v=“+youtube视频id；
var_url=”http://img.youtube.com/vi/“+youtube\u video\u id+”/1.jpg”；
变量iframe_url=”http://www.youtube.com/embed/“+youtube\u video\u id+”？自动播放=1”；
var api_url=”https://gdata.youtube.com/feeds/api/videos/“+youtube_video_id+”？脚本中的v=2&alt=json&callback=？”；
$（函数（）{
//获取视频信息并设置标题。
$.getJSON（api_url，函数（数据）{
$（“.info”）.html（“”）；
});
//设置视频的缩略图图像。
$（“.preview img.thumb”）.attr（“src”，缩略图\u url）；
//单击图像时切换到iframe。
$（“.preview”）。单击（函数（）{
$（this.html（“”）；
$（this.css（“float”，“none”）；
});
});
var youtube_video_id1=“rHtVc1asWCc”；
var video_url=”http://youtube.com/watch?v=“+youtube视频id1；
var_url=”http://img.youtube.com/vi/“+youtube\u video\u id1+”/1.jpg”；
变量iframe_url=”http://www.youtube.com/embed/“+youtube\u video\u id1+”？自动播放=1”；
var api_url=”https://gdata.youtube.com/feeds/api/videos/“+youtube_video_id1+”？脚本中的v=2&alt=json&callback=？”；
$（函数（）{
//获取视频信息并设置标题。
$.getJSON（api_url，函数（数据）{
$（“.info”）.html（“”）；
});
//设置视频的缩略图图像。
$（“.preview img.thumb1”）.attr（“src”，缩略图\u url）；
//单击图像时切换到iframe。
$（“.preview”）。单击（函数（）{
$（this.html（“”）；
$（this.css（“float”，“none”）；
});
});

---

它在JSFIDLE上运行良好，但是当我在项目中导入相同的代码时，相同的视频会重复两次。所以请帮我解决这个问题。提前谢谢。

这里有一个解决方法

您基本上需要将

.preview

重命名为

.preview1

$（'.preview'）

将应用于这两个视频（以及具有预览类的所有其他视频）。我还编辑了一些css（添加了preview1）并修复了格式错误的html

---

我重新命名了很多不必要的东西，这样更容易复制粘贴，这似乎是您一开始所做的。

非常感谢。。它很有魅力。。但是它是如何在JS fiddle sanchit中工作的呢？我有一个小问题。我们可以在单击视频之前扩展视频的图像大小吗？当然，只需编辑你的css

img.thumb{宽度：500px；高度：500px；}

不过，您可能需要更高分辨率的图像。您正在javascript中添加图像名称<代码>0。jpg是最高分辨率的图像。您的选择是0、1、2和3.jpg。您当前正在使用1.jpg。另一个请求。请让我知道如何更改此视频的图像。提前感谢您在不同的url中输入缩略图\u url？：\我觉得复印粘贴太多了。试着理解你在做什么，伙计！