如何更改响应式 iframe 的 jquery 脚本答案

【问题标题】：how to change jquery script for responsive iframe如何更改响应式 iframe 的 jquery 脚本
【发布时间】：2014-06-21 05:46:44
【问题描述】：

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

我的脚本有两个问题，这将非常有用，但我似乎不了解它的功能。我想要的是：它应该只在 .post-body 中调整 youtube 和 vimeo iframe 的大小。

问题：

在文章页面（类型项目页面）上，它调整所有视频 iframe 的大小，这些 iframe 不仅在 .post-body 中，而且在页面上，例如在页脚中。页面：http://ildesign-blogger-demo-1.blogspot.fr/2014/04/1st-article.html
在页面的存档类型列表（按日期存档）中，视频在 .post-body 中没有调整大小（但应该如此），在页脚中也没有（没关系）。页面：http://ildesign-blogger-demo-1.blogspot.fr/2014_04_01_archive.html

总结：所以，我的脚本似乎只适用于一种类型的页面（项目），尽管我在</body> 标记之前插入了脚本，而不是在 if 条件下。此外，它似乎影响（它是有效的）页面上的所有视频，而不仅仅是 .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>

【问题讨论】：

标签： jquery iframe responsive-design xhtml

【解决方案1】：

好吧，我认为我的脚本构建得不好，因为它影响了视频并调整了网站元素的大小...如果您指定“正文”，它会调整正文的视频大小宽度，如果发布正文，那么所有这些都已调整为发布正文宽度......这不是我想要的......

如果您正在寻找与我相同的东西：将您的 youtube 和 vimeo 视频 iframe 调整为 100% 的父 div 宽度，这是一个很好的脚本，也适用于 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 );

重要提示：您必须插入以像素为单位的原始宽度和高度 (width="560" height="315") 的 iframe，以便脚本可以计算宽高比！

【讨论】：