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

我试图使用脚本中，我拥有一些tumblr视频的帖子（那些标有“特色”二字），但我有两个问题：

1）我不知道如何设置页面上的视频大小（理想的300宽度）。他们被困在400px。
2）当人们点击游戏时，我希望视频的宽度增加到1000px。

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

来源

2015-11-13 kathryn

这是什么JS代码？ – void

@void它是JS显示的特色帖子，其中我可能必须添加一些变量来设置视频大小（我猜）。 – kathryn

你可以简单地通过使用

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();

来源

2015-11-15 07:12:18

改变iframe的高度和宽度，这样做的正确的方式可能是通过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）和一个单独的可点击按钮。你可以附加你想要的按钮的任何处理程序（甚至创建自己的按钮），但你也想重新加载一个新的iframe与嵌入的网址，并追加?autoplay=1到底，这将开始视频。

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

来源

2015-11-15 07:38:19

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

回答

相关问题