skip to main content

Cara mengubah semua embed video di blog menjadi responsive

Ditulis Oleh Pada


Bagaimana Cara nya untuk mengubah semua embed video player di blog menjadi responsive??? sekilas tentang apa itu definisi dari desain responsif : Desain Responsif tidak sama dengan desain ponsel. Desain ponsel memerlukan membuat website atau web app yang sama sekali baru dengan konten khusus diciptakan untuk pengalaman mobile.

Desain Responsif, di sisi lain, berarti bahwa domain yang sama, isi yang sama, dan sintaks yang sama - lebih atau kurang dimanipulasi oleh JavaScript dan / atau CSS3 Media Queries - menanggapi viewports berbeda untuk memberikan pengalaman pengguna yang terbaik mungkin untuk setiap perangkat . Viewports berbeda termasuk monitor desktop, laptop, tablet, dan perangkat mobile dan orientasi yang sesuai mereka.Web developer dan desainer harus melalui pergeseran dalam berpikir tentang bagaimana untuk memenuhi desain untuk viewports berbeda. Sebuah website harus terlihat baik tetapi, yang paling penting, perlu sama-sama dapat digunakan pada smartphone, tablet, e-reader, dan desktop atau laptop.

Desain responsif mungkin telah dimulai sebagai sebuah tren, tetapi telah dengan cepat menjadi langkah evolusi dalam pengembangan web dan desain yang memiliki desain sangat terpengaruh dan teknologi. Script yang akan saya sharing kali ini adalah berasal dari github (https://github.com/toddmotto/fluidvids) yang dibuat oleh toddmotto.Fungsi dari script ini adalah untuk mengubah semua embed video yang ada di blog menjadi responsive,tanpa mengubah video yang sebelumnya telah ada didalam artikel yang sebelumnya sudah diterbitkan.

Mau Lihat Demo??? Resize window browser elo broo !!! dan lihat perubahan pada embed video dari youtube dibawah ini :




Cara menerapkan Script Responsive embed video ini di blog :


Tambahkan Script Dibawah ini diatas </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>

Jika ingin menambahkan player yang lain (secara default script diatas hanya mengubah youtube dan vimeo player menjadi responsive,Untuk player dari website lain haruslah menambahkan secara manual) .Seumpama mau menambahkan player dari putlocker misalnya,Cukup mengubah scriptnya di bagian :

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

sehingga menjadi :

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


Demikian info singkat dari CitCitCuwitCuwit Mengenai bagaimana Cara nya mengubah semua embed video di blog menjadi responsive. semoga bermanfaat.
×