Question

尝试根据用户点击的缩略图替换YouTube视频。因此，您会看到视频，下方有2个缩略图。如果单击其中一个拇指，则视频会发生变化。我已经改变了，视频ID没有改变。它说未定义。我试图弄清楚如何使用数组交换视频ID。提前谢谢你们。

HTML：

<div id="video_container">
    <iframe src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=1" frameborder="0" allowfullscreen ></iframe>
</div>

<div class="thumbs">
    <img src="//placehold.it/100">
    <img src="//placehold.it/100">
</div>

JS：

$('.thumbs img').on('click', function(e) {
    e.preventDefault();
    var vID = new Array(
        'hZ8Xj_I3aNU',
        'luyOn5DdUZs'
    );

    var URL = $(this).attr('src');
    var videoPlayer = '<iframe src="//www.youtube.com/embed/' + URL + '/?rel=0&showinfo=0&autoplay=0&autohide=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>';

    $('##video_container').html(videoPlayer);
        return false;
    });
});

Answer 1

不完全确定您尝试做什么，但视频ID是图片的ID属性适合您吗？

<div id="video_container">
    <iframe src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=1" frameborder="0" allowfullscreen >      </iframe>
</div>

<div class="thumbs">
    <img id="hZ8Xj_I3aNU" src="//placehold.it/100">
    <img id="luyOn5DdUZs" src="//placehold.it/100">
</div>

$('.thumbs img').on('click', function(e) {
        e.preventDefault();

            var URL = $(this).attr('id');
            var videoPlayer = '<iframe src="//www.youtube.com/embed/' + URL + '/?rel=0&showinfo=0&autoplay=0&autohide=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>';



            $('#video_container').html(videoPlayer);
            return false;
        });

小提琴：http://jsfiddle.net/mz1brzfp/1/

点击时更改视频src

1 个答案: