как изменить скрипт jquery для адаптивного iframe

Question

как изменить скрипт jquery для адаптивного iframe

0

У меня есть сайт Blogger: http://ildesign-blogger-demo-1.blogspot.fr

У меня две проблемы со сценарием, который был бы очень полезен, но я, кажется, не понял его функции. Я хочу: он должен изменять размеры ifutube и vimeo iframes только в.post-body.

Проблемы:

На странице статьи (страница с типом) она изменяет размеры всех видеофрагментов, которые находятся не только в.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>

Igor Laszlo 05 май 2014, в 04:43

Источник

Теги:

jquery

iframe

responsive-design

xhtml

1 ответ

Ещё вопросы

Igor Laszlo · Answer 1 · 2014-05-05T01-50-00.000Z

Ну, я думаю, что сценарий, который у меня был, не был хорошо построен, потому что он сделал видео и изменил размер до размера элемента веб-сайта... если вы указали "тело", он изменил размер видео по ширине тела, если после тела, то все они были изменены, чтобы опубликовать ширину тела... это не то, что я искал...

Если вы ищете ту же самую вещь, которую я искал: измените размер вашего youtube и vimeo video iframe на его родительскую ширину div на 100%, это хороший скрипт, который также работает в Blogger (источник: http://toddmotto.com/жидкость-и-отзывчивая-youtube-и-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 w/h dimensions
       */
      var videoRatio        = ( iframe.height / iframe.width ) * 100;

      /*
       * Replace the iframe 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 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"), которые скрипт мог бы рассчитать аспектный рацион!