如何更改jQuery腳本爲響應IFRAME

Question

我有Blogger網站：http://ildesign-blogger-demo-1.blogspot.fr

我有兩個問題，一個腳本這將是非常有用的，但我似乎我不明白它的功能。我想要的是：它應該只在.post-body中調整youtube和vimeo iframe的大小。

的問題：

1. 在文章頁面（項目類型頁）它會調整所有的視頻I幀這不僅在.POST體，但網頁上，例如在頁腳。頁：http://ildesign-blogger-demo-1.blogspot.fr/2014/04/1st-article.html

2. 在存檔類型的網頁列表（按日期存檔），視頻不會在.POST體大小（但應該是），在頁腳沒有（這是確定）。頁：http://ildesign-blogger-demo-1.blogspot.fr/2014_04_01_archive.html

摘要： 所以，似乎我只是</body>標籤之前插入腳本我的腳本只適用於一種類型的頁面（項目）的，儘管事實上並沒有如果條件。 此外，它似乎影響（這是valide）頁面上的所有視頻，而不是僅在.post-body（我想要的）內的視頻。

有人可以告訴我如何重寫它所做的腳本嗎？

<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function() { 

    // Find all YouTube and Vimeo videos, all types can be added with iframe integration 
    var $allVideos = $('iframe[src^="http://player.vimeo.com"], iframe[src^="//www.youtube.com"], object, embed'), $fluidEl = $('.post-body'); 

    // Figure out and save aspect ratio for each video 
    $allVideos.each(function() { 

     $(this) 
      .attr('data-aspectRatio', this.height/this.width) 
      .removeAttr('height') 
      .removeAttr('width'); 

    }); 

    // When the window is resized 
    $(window).resize(function() { 

     var newWidth = $fluidEl.width(); 

     // Resize all videos according to their own aspect ratio 
     $allVideos.each(function() { 

      var $el = $(this); 
      $el 
       .width(newWidth) 
       .height(newWidth * $el.attr('data-aspectRatio')); 

     }); 

    // Kick off one resize to fix all videos on page load 
    }).resize(); 

}); 
//]]> 
</script> 

Answer 1

嗯，我覺得劇本我有沒有精心打造的，因爲它影響了視頻和調整到網站的一個元素的大小......如果你表示爲「體」，它的大小視頻爲身體寬度，如果發佈身體，那麼他們都已調整大小後體寬...這不是我正在尋找的...

如果你正在尋找我正在尋找同樣的東西用於：將youtube和vimeo視頻iframe的大小調整爲其父級div寬度爲100％，這是一個很好的腳本，它也適用於Blogger（來源：http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/）：

(function (window, document, undefined) { 

    /* 
    * Grab all iframes on the page or return 
    */ 
    var iframes = document.getElementsByTagName('iframe'); 

    /* 
    * Loop through the iframes array 
    */ 
    for (var i = 0; i < iframes.length; i++) { 

    var iframe = iframes[i], 

    /* 
     * RegExp, extend this if you need more players 
     */ 
    players = /www.youtube.com|player.vimeo.com/; 

    /* 
    * If the RegExp pattern exists within the current iframe 
    */ 
    if (iframe.src.search(players) > 0) { 

     /* 
     * Calculate the video ratio based on the iframe's w/h dimensions 
     */ 
     var videoRatio  = (iframe.height/iframe.width) * 100; 

     /* 
     * Replace the iframe's dimensions and position 
     * the iframe absolute, this is the trick to emulate 
     * the video ratio 
     */ 
     iframe.style.position = 'absolute'; 
     iframe.style.top  = '0'; 
     iframe.style.left  = '0'; 
     iframe.width   = '100%'; 
     iframe.height   = '100%'; 

     /* 
     * Wrap the iframe in a new <div> which uses a 
     * dynamically fetched padding-top property based 
     * on the video's w/h dimensions 
     */ 
     var wrap    = document.createElement('div'); 
     wrap.className  = 'fluid-vids'; 
     wrap.style.width  = '100%'; 
     wrap.style.position = 'relative'; 
     wrap.style.paddingTop = videoRatio + '%'; 

     /* 
     * Add the iframe inside our newly created <div> 
     */ 
     var iframeParent  = iframe.parentNode; 
     iframeParent.insertBefore(wrap, iframe); 
     wrap.appendChild(iframe); 

    } 

    } 

})(window, document); 

重要說明：您必須將其原始寬度和高度的iframe插入像素（width="560" height="315"），腳本才能計算寬高比！