1

我正在处理一个页面，我需要在同一页面中播放 youtube 视频，当用户单击任何列出的视频时，它应该将标题和日期复制到活动视频区域。

在我的情况下，它会复制内容并更改视频，但是当我单击视频列表时它会删除活动链接。

尝试点击链接，它会一一删除，视频也不会显示

我在jsFiddle上的代码

HTML

<div style="float:left; width=800px;" id="video_container">
    <div class="active-iframe">
        <iframe width="438" height="250" src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=0" frameborder="0" allowfullscreen="1"></iframe>
    </div>
</div>
<span class="active-video-title">Title</span>

<span class="active-video-date">Date</span>

<div class="row">
    <br> <a href="oDAw7vW7H0c" class="play-youtube">
            <span class="youtube-thumbnail">Thumnnail 1</span>
       <div class="title-wrapper">
            <span class="title">Title of the Video 1</span>
             <span class="date">Date  1</span>
        </div>
        </a>

    <br> <a href="5F-Wge37_ys" class="play-youtube">
            <span class="youtube-thumbnail">Thumnnail 2</span>
        <div class="title-wrapper">
            <span class="title">Title of the Video 2</span>
             <span class="date">Date  2</span>
            </div>
        </a>

</div>
<div class="row2">
    <br> <a href="oDAw7vW7H0c" class="play-youtube">
            <span class="youtube-thumbnail">featured Thumnnail 1</span>
        <div class="title-wrapper-control">
            <span class="featured-title">featured Title of the Video 1</span>
             <span class="featured-date">featured Date  1</span>
        </div>
        </a>

    <br> <a href="5F-Wge37_ys" class="play-youtube">
            <span class="youtube-thumbnail">featured Thumnnail 2</span>
        <div class="title-wrapper-control">
            <span class="featured-title">featured Title of the Video 2</span>
             <span class="featured-date">featured Date  2</span>
        </div>
        </a>

</div>
4

2 回答 2

3

改变这个

$(".active-iframe").html($(this).html(htm));

至

$(".active-iframe").html(htm);

看看：http: //jsfiddle.net/KSMZ9/40/

于 2013-09-17T11:05:08.840 回答
1

这是因为线

$(".active-iframe").html($(this).html(htm));

替换链接的 HTML，而不是iframe 的来源。反而 ：

$('iframe').attr('src', 'http://www.youtube.com/embed/' + URL);

并跳过var htm = ..

演示/分叉小提琴http://jsfiddle.net/5RnAe/

于 2013-09-17T11:05:53.467 回答