調整大小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）

回答

相關問題