0 How to convert all video embed in blogs become responsive

Posted by Nugroho. Category: Blogger Templates , Blogger Tools , Blogger Widget , Blogspot Tutorial

How to convert all of its video player embed in blogs become responsive??? The script which I will share this time is derived from github (https://github.com/toddmotto/fluidvids) made ​​by toddmotto. function of this script is to change all existing video embed blog into a responsive, without changing the existing video earlier in the article previously published.





Want to See Demo

How to apply this script on the blog:

 Add Below script above the </ body>:

<script type='text/javascript'>
      /*<![CDATA[*/
/*!
 *  FluidVids.js v1.2.0
 *  Responsive and fluid YouTube/Vimeo video embeds.
 *  Project: https://github.com/toddmotto/fluidvids
 *  by Todd Motto: http://toddmotto.com
 *
 *  Copyright 2013 Todd Motto. MIT licensed.
 */
window.fluidvids = (function (window, document, undefined) {

  'use strict';

  /*
   * Constructor function
   */
  var Fluidvids = function (elem) {
    this.elem = elem;
  };

  /*
   * Prototypal setup
   */
  Fluidvids.prototype = {

    init : function () {

      var videoRatio = (this.elem.height / this.elem.width) * 100;
      this.elem.style.position = 'absolute';
      this.elem.style.top = '0';
      this.elem.style.left = '0';
      this.elem.width = '100%';
      this.elem.height = '100%';

      var wrap = document.createElement('div');
      wrap.className = 'fluidvids';
      wrap.style.width = '100%';
      wrap.style.position = 'relative';
      wrap.style.paddingTop = videoRatio + '%';
      
      var thisParent = this.elem.parentNode;
      thisParent.insertBefore(wrap, this.elem);
      wrap.appendChild(this.elem);

    }

  };

  /*
   * Initiate the plugin
   */
  var iframes = document.getElementsByTagName( 'iframe' );

  for (var i = 0; i < iframes.length; i++) {
    var players = /www.youtube.com|player.vimeo.com/;
    if (iframes[i].src.search(players) > 0) {
      new Fluidvids(iframes[i]).init();
    }
  }

})(window, document);

/*]]>*/</script>

If you want to add another player (by default the script above just change the youtube and vimeo player into a responsive, for players from other websites must be added manually). Supposing want to add a player of the putlocker for example, enough to change the script in part:

players = /www.youtube.com|player.vimeo.com/;

 to be:

players = /www.youtube.com|www.putlocker.com|player.vimeo.com/;

Similarly, brief info of my hopefully useful
 

Tweet

Comment →