调整YouTube视频大小（在页面和onclick上）

I'm trying to use a script in which I feature some tumblr video posts (those tagged with "featured" word) but I have two problems:

1) I don't know how set a size for the videos on the page (ideal 300 width). they are stuck on 400px.
2) I'd like the videos to grow to 1000px width, when people click play.

My tumblr is on cookjs.tumblr.com
can anyone help? thank you so much in advance!

   <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>

you can simply change the iframe height and width by using

 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 call this function

resizeIfrmae();

So the right way of doing this is probably through the YouTube IFrame Player API. You'll be specifically interested in the onStateChange event listener. There's another way that I've done this that you may be interested in; here's the jQuery (since I was new to JS at the time):

$('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);
    });
});

What this is doing is grabbing the video url from each video on the page, removing the iframe and replacing it with the thumbnail (hosted by YouTube) and a separate clickable button. You can attach any handler you want to the button (even create your own button) but you'll also want to reload a new iframe with the embed url and append ?autoplay=1 to the end, which will start the video.

Here's a demo of this effect; something I coded a few years ago.