我正试图使用一个脚本，在其中我展示了一些tumblr视频帖子（那些带有"特色"词的帖子），但我有两个问题：
1） 我不知道如何设置页面上视频的大小（理想的300宽）。它们被固定在400px上
2） 当人们点击播放时，我希望视频的宽度能增加到1000像素。
我的tumblr在cookjs.tumblr.com
上有人能帮忙吗？提前感谢您！
<script>
if ($('p img').length > 0)
$(".textpost").css("overflow","hidden");
var rssurl = '/tagged/{text:Featured Tag}/rss';
$.get(rssurl, function(data) {
var $xml = $(data);
var vari = 0;
$xml.find("item").each(function() {
var $this = $(this),
item = {
title: $this.find("title").text(),
link: $this.find("link").text(),
description: $this.find("description").text(),
pubDate: $this.find("pubDate").text(),
author: $this.find("author").text()
}
vari = vari +1;
if(vari <4){
$('.featured-subhead').append('<section class=""><h2>
<a href="' + item.link + '"></a></h2>
<div class="">' + item.description + '</div><div class="">
<a href="' + item.link + '">Read More</a></div></section>');
}
});
});
</script>
因此，正确的方法可能是通过YouTube IFrame Player API。您将对onStateChange事件侦听器特别感兴趣。我做这件事的另一种方式你可能会感兴趣；这是jQuery（因为我当时刚接触JS）：
$('iframe[src*="youtube.com"]').each(function(){
var videoURL = $(this).attr('src');
var videoID = videoURL.substr(videoURL.length - 11,11);
var thumbURL = 'http://img.youtube.com/vi/' + videoID + '/0.jpg';
$(this).wrap("<div class='video'></div>");
var videoDiv = $(this).parent();
videoDiv.css('background-image', 'url("' + thumbURL + '")').attr('id',videoID);
var heightUnit = $(this).height()*.25;
var widthUnit = $(this).width()*.20;
videoDiv.css('background-position', '0%, -' + heightUnit + 'px');
$(this).remove();
var playButton = $('<img />').attr({
'class': 'button',
'src':'playbutton.png'
}).css({
'width':widthUnit,
'margin-top': '-' + (widthUnit/2)*.783,
'margin-left': '-' + (widthUnit/2)
});
videoDiv.append(playButton);
playButton.on("click",function(){
$(this).css('opacity','0');
var newFrame = $('<iframe />').attr({
'src': 'http://www.youtube.com/embed/' + videoID + '?autoplay=1',
'frameBorder':'0'
});
videoDiv.append(newFrame);
});
});
这样做的目的是从页面上的每个视频中获取视频url，删除iframe，并用缩略图（由YouTube托管）和一个单独的可点击按钮替换它。你可以将你想要的任何处理程序附加到按钮上（甚至创建你自己的按钮），但你也需要重新加载一个带有嵌入url的新iframe，并将?autoplay=1附加到末尾，这将启动视频。
以下是这种效果的演示；我几年前编码的东西。
您可以使用简单地更改iframe的高度和宽度
function resizeIfrmae()
{
// your ifrmae id or you can pass id via function param
// resizeIfrmae(id) like this
$('#youtube_iframe_id').css('width','150');
$('#youtube_iframe_id').css('height','150');
}
onclick调用此函数
resizeIfrmae();