调整 youtube 视频的大小（在页面上和 onclick）答案

【问题标题】：Resize youtube video (on page and onclick)调整 youtube 视频的大小（在页面上和 onclick）
【发布时间】：2016-02-15 08:40:51
【问题描述】：

我正在尝试使用一个脚本，其中包含一些 tumblr 视频帖子（那些带有“精选”字样的标签），但我有两个问题：

1）我不知道如何为页面上的视频设置大小（理想的 300 宽度）。他们被困在 400 像素上。
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>

【问题讨论】：

这个JS代码是干什么用的？
@void 这是显示精选帖子的 JS，我可能必须在其中添加一些 var 来设置视频大小（我猜）。

标签： javascript php jquery css youtube

【解决方案1】：

所以正确的做法可能是通过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);
    });
});

这样做是从页面上的每个视频中获取视频网址，删除 iframe 并将其替换为缩略图（由 YouTube 托管）和一个单独的可点击按钮。您可以将所需的任何处理程序附加到按钮（甚至创建自己的按钮），但您还需要使用嵌入 url 重新加载新的 iframe，并将 ?autoplay=1 附加到末尾，这将开始视频。

Here's a demo of this effect;我几年前编写的代码。

【讨论】：

【解决方案2】：

您可以使用

简单地更改 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();

【讨论】：