在jQuery中单击链接时尝试嵌入视频

Question

我试图一次性嵌入视频而不是全部10来增加加载时间。这样做最好的方法是什么？提前感谢您的帮助。

<script type="text/Javascript">
    $('#rssdata').ready(function()
    {
        var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=4ac421def2dc13ca08c0eef36386563d&_render=json';
enter code here



var i = 1;

$.getJSON(pipe_url,function(data)
{

$(data.value.items).each(function(index,item)
{

var embed_link = item.link.replace("https://youtube.com/watch?v=",              "https://www.youtube.com/embed/");

var youtube_Embed = '<iframe width="560" height="315" src="'+ embed_link + '" frameborder="0" allowfullscreen></iframe>'


var item_html = '<li><div data-toggle="collapse" href="#element' + i + '"><a href="'+item.link+'">'+item.title+'<\/a></div><\/li>';

item_html += '<div class="collapse" id="element' + i + '">' + youtube_Embed + '</div>';

$('#rssdata ul.rss-items').append(item_html);

i++;
});
$('#rssdata div.loading').fadeOut();
$('#rssdata ul.rss-items').slideDown();
});
});
</script>
</div>
</div>

Answer 1

HTML

<div class="container">
    <div class="video"><iframe width="560" height="315" src="//www.youtube.com/embed/zsYjsgm4Psg" frameborder="0" allowfullscreen></iframe>
    </div>

<ul class="list_video">
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=NWHfY_lvKIQ')">Learning from StackOverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=QZWBtfSBlp8')">Joel Spolsky - StackOverflow.com </a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=m4ZPBPUA30M')">Jeff Atwood - Stackoverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=NWHfY_lvKIQ')">Learning from StackOverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=QZWBtfSBlp8')">Joel Spolsky - StackOverflow.com </a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=m4ZPBPUA30M')">Jeff Atwood - Stackoverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=NWHfY_lvKIQ')">Learning from StackOverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=QZWBtfSBlp8')">Joel Spolsky - StackOverflow.com </a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=m4ZPBPUA30M')">Jeff Atwood - Stackoverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=NWHfY_lvKIQ')">Learning from StackOverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=QZWBtfSBlp8')">Joel Spolsky - StackOverflow.com </a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=m4ZPBPUA30M')">Jeff Atwood - Stackoverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=NWHfY_lvKIQ')">Learning from StackOverflow.com</a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=QZWBtfSBlp8')">Joel Spolsky - StackOverflow.com </a></li>
 <li><a href="javascript:load_video('https://www.youtube.com/watch?v=m4ZPBPUA30M')">Jeff Atwood - Stackoverflow.com</a></li>
</ul>
</div>

CSS

.container{
    width:800px;
    border:2px solid #333;
    overflow:hidden;
    font-family:arial;
    background-color:#000;
}
.video{float:left;}
ul.list_video{float:left;list-style-type:none;margin:0;padding:0;width:240px;overflow-y:scroll;height:315px;}
ul.list_video li{font-size:10pt;}
ul.list_video li a{
    display:block;
    text-decoration:none;
    color:#09C;
    padding:3px;
    text-align:left;
    background-color:#333;
    border-bottom:1px solid #000;
}
ul.list_video li a:hover{background-color:#000;}

Javascript + jQuery

function load_video(link){
    link = link.replace("https:","");
    link = link.replace("watch?v=","embed/");
    $('.video').html('<iframe width="560" height="315" src="'+link+'" frameborder="0" allowfullscreen></iframe>')
}

我允许自己制作视频列表并点击更改从YouTube解析视频的iframe网址

此处：http://jsfiddle.net/XdZm5/2/