我想在我的网站上创建一个“最新视频”块,但我只需要YouTube缩略图并且可能是视频的标题。我找到了一种为最新视频本身进行嵌入的方法,但我不确定是否可以仅为缩略图修改它。
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
这可以改变我的想法吗?如果不能,我该怎么办呢?我有基本的HTML和CSS知识,对javascript和php的理解非常有限。如果我能得到一些可以交换缩略图并理想地显示标题的东西,我可以处理样式和实现。同样对特定播放列表最近添加的内容感兴趣,但这不一定会发生。
答案 0 :(得分:0)
不确定这是不是您的意思,但您可以尝试以下方式:
<div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
<!-- Embed code here -->
</div>