1 (edited by micmac 22-01-2016 13:19:55)

Topic: responsive video size for nibbleblog espresso

Hi

to have video-post resized put this js-script found somewhere on the internet just before the body end tag:


........
<script>
$(document).ready(function(){
             
       
        // Find all YouTube videos
      (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 );
      });</script></body>