Wordpress Plugin: Simple YouTube Responsive

Simple YouTube Responsive

  • Facebook
  • Twitter
  • Google+
  • Whatsapp


Simple YouTube Responsive WordPress Plugin
Cara mudah pasang video YouTube ke Blog WordPress kamu menggunakan shortcode. Dan sesuai judulnya, akan selalu responsive!

Dengan menggunakan embed code YouTube yang terbaru, namun dengan plugin ini video ayng terpasang akan selalu responsive. Porposi rasionya tidak akan berubah. Kamu bisa mengetesnya dengan cara membukanya lewat smartphone atau resize browser di PC kamu.

Installation

Untuk menggunakannya, sangat mudah. Pertama kamu harus install pluginnya terlebih dahulu.
  1. Masuk Dashboard WordPress kamu, masuk menu Plugins > Add New
  2. Cari: Simple YouTube Responsive
  3. Klik Install, kemudian setelah installasi selesai, klik Activate.
  4. Selesai.
Atau install secara manual:
  1. Download pluginnya terlebih dahulu.
  2. Login ke Blog WordPress kamu sebagai Administrator. Masuk ke menu Plugins > Add New
  3. Klik tombol Upload Plugin.
  4. Lalu upload file dad-youtube-responsive.zip yang sudah kamu download tadi.
  5. Setelah plugin selesai diupload, klik Activate Plugin.
  6. Selesai.

How To Use

Menggunakannya cukup mudah. Gunakan shortcode [youtube v="XXXXXX"] dimana XXXXXX itu adalah ID video pada YouTube.
Kamu bisa menggunakan shortcode ini pada post, ataupun widgets.

Shortcodes

Berikut ini beberapa attribute shortcode untuk kustomisasi YouTube Player kamu.
Show YouTube Video
[youtube v="XXXXXX"]
Untuk mendapatkan ID XXXXXX, kamu bisa mengcopy dari URL video tersebut.
https://www.youtube.com/watch?v=XXXXXX
Set Custom Aspect Ratio
[youtube v="XXXXXX" ratio="4:3"]


Formatnya x:y (lebar:tinggi). Kamu bisa mengubahnya menjadi 4:3, 2:1. Atau terserah kamu. Defaultnya 16:9. Tanpa menggunakan attribute ini otomatis akan menggunakan 16:9
Set Maximum Width
[youtube v="XXXXXX" maxwidth="480px"]
Jika kamu ingin membatasi lebar maksimal pada video ini. Karena secara default dibatasi menjadi 600px. Jika kamu ingin menghapus batasan lebar, kamu bisa menggantinya dengan 100%
Custom ID Attribute
[youtube v="XXXXXX" id="my-youtube-video"]
Jika kamu ingin menambahkan attribute id=”” pada video.
Custom Classes Attribute
[youtube v="XXXXXX" class="my-videos clearfix youtube"]
Jika kamu ingin menambahkan attribute class=”” pada video. Bisa menggunakan lebih dari satu Class.
Custom CSS Attribute
[youtube v="XXXXXX" style="border: 2px solid #ff000; background-color: #f1f1f1;"]
Jika kamu ingin menambahkan attribute style=”” pada video untuk kreasi CSS kamu.

Facebook Instant Articles

Tambahkan Transform Rule berikut ini ke halaman Settings pada plugin Facebook Instant Articles
{ "rules" : [

  {
    "class" : "InteractiveRule", 
    "selector" : "div.dad-youtube-responsive",
    "properties" : {
      "interactive.iframe" : {
        "type" : "element",
        "selector" : "div"
      }
    }
  }

]  }

Screenshots

Wordpress Plugin YouTube Responsive
Wordpress Plugin YouTube Responsive
Wordpress Plugin YouTube Responsive
Wordpress Plugin YouTube Responsive

Changelogs

  • Version 1.2.4 (23 Feb 2017)
    • [[Bug Fix]] Break posts when AMP not installed.
    • [[Bug Fix]] Not showing on sidebar for several themes.
    Version 1.2.3 (22 Feb 2017)
    • [[New]] Google AMP supported.
    Version 1.2.2
    • [[New]] Alias attribute. “v” for more simple shortcode
    Version 1.2.1
    • [[Bug Fix]] PHP Error: Divided by zero
    • [[Removed]] Default width
    • [[New]] Facebook Instant Articles supported
    Version 1.2.0
    • [[Bug Fix]] Video not loaded on https website
    Version 1.1.0
    • [[Bug Fix]] Failed installation because of Plugin Header
    • [[Update]] Add TinyMCE Rich Editor support
    Version 1.0.0
    Baru rilis kali cuy
Summary
Simple YouTube Responsive WordPress Plugin
Article Name
Simple YouTube Responsive WordPress Plugin
Description
Add your favorite YouTube video to your website. Always responsive on any viewports. Insert to your post or even for your WordPress widget. No JavaScript required. Pure CSS and never slow down your website.
Author
Publisher Name
Dark Ard
Publisher Logo

Asik Juga Nih Buat Dibaca

(99 Posts)

Blogger dan Netizen ganteng budiman yang rada geser otaknya. Gantengnya sih berkat angle yang tepat saat pemotretan. Katanya sih, bapaknya Deezclan. Tapi kenyataannya malah sering ditelantarin. Jangan digodain mulu, ntar malah naksir lagi. Biar jelek gini pesonanya ada aja.