2 Langkah Cara Memasang Embed Video Youtube Responsive – Artikel tutorial ini cocok untuk bagi anda yang ingin memasang embed video youtube responsive tanpa plugin. Sehingga server tidak terlalu terbebani dengan plugin yang memang tidak dipakai secara maksimal. Pada artikel sebelumnya NginY sudah berbagi tentang cara memasang embed video youtube dengan plugin. Namun, jika anda hanya menggunakannya untuk memasang embed video youtube untuk single video, mungkin cara ini bisa anda pertimbangkan.

Baca juga: Cara Embed Video Youtube Ke Dalam Post WordPress

Mengapa kita perlu memasang embed video youtube responsive ?

Video merupakan salah satu elemen multimedia yang memungkinkan pengiriman sinyal elektronik dari suatu gambar bergerak. Salah satu platform yang menjadi tempat berkumpul untuk berbagi video adalah youtube.

Youtube sendiri sebenarnya sudah menyediakan kode embed yang dapat anda pasang di mana saja. Namun pada dasarnya kode embed yang disediakan oleh youtube tidaklah responsive.

Beberapa tema dari wordpress tidak responsive jika dipasang kode embed yang diberikan youtube. Dan jika kode embed dari youtube tidak responsive ditema anda, maka tentu saja akan mengganggu pandangan pengunjung.

Read More  2 Cara Dan Langkah-Langkah Memposting di Wordpress Lewat Android
cara memasang embed video youtube responsive - contoh tanpa modifikasi
contoh kode embed video youtube tanpa modifikasi

Berikut salah satu contoh percobaan saya pada artikel 7 Fakta Mark Zuckerberg Yang Mungkin Membuat Kalian Tercengang jika dipasang kode embed dari youtube tanpa modifikasi.

Baca juga: 7 Fakta Mark Zuckerberg Yang Mungkin Membuat Kalian Tercengang

Bagaimana cara memasang embed video youtube responsive ?

Untuk membuat kode embed  dari youtube responsive pada website, kita perlu menambah beberapa potong kode css pada website. Berikut langkah – langkahnya.

1 ) Copy Kode Embed Dari youtube

Klik kanan pada video youtube yang anda ingin masukkan. Lalu klik pilih Copy embed code

cara memasang embed video youtube responsive - Klik kanan klik embed
Klik kanan klik embed

2 ) Tambahkan Kode css dan selubungi dalam tag div

Kode yang dapat anda paste kira – kira seperti ini:

<iframe 
  width="854"
  height="480"
  src="https://www.youtube.com/embed/ZbZSe6N_BXs"
  frameborder="0"
  gesture="media"
  allowfullscreen><iframe>

Untuk dapat membuat kode embed youtube responsive, anda dapat menambah kode css pada iframe tersebut menjadi seperti ini,

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Dan menyelubungi iframe tersebut dengan tag div dengan class videowrapper


<div class="videowrapper">
  <iframe
    width="854"
    height="480"
    src="https://www.youtube.com/embed/ZbZSe6N_BXs"
    frameborder="0"
    gesture="media"
    allowfullscreen >
  </iframe>
</div>

Kesimpulan

Dengan menambahkan kode css tersebut, tampilan embed video youtube pada artikel yang tadi menjadi lebih rapih.

Read More  7 Alasan Mengapa Harus Menggunakan Wordpress.org untuk Blogging
cara memasang embed video youtube responsive - Hasil modifikasi
Hasil modifikasi

Responsive adalah elemen penting dalam web desain. Bahkan responsibilitas merupakan salah satu penilaian google dalam menentukan page rank.

Jika anda menemukan cara lain yang lebih mudah untuk membuat kode embed dari youtube menjadi responsive. Anda dapat menambahkannya pada kolom komentar! Dan terbuka untuk diskusi.

The way to get started is to quit talking and begin doing – Walt Disney

Referensi: Shrink a YouTube video to responsive width

davidasync

The Joy of discovery is one of the best things about being a software developer ~ Eric Elliott

7
Leave a Reply

avatar
1000
4 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
NginYKomukotemukry surayaRhinal NaldiAnewnime Author Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Komukote
Guest

Untuk orang awam, pada bagian penambahan kode css masih kurang bisa diikuti…
Mungkin bisa dijelaskan lebih detil…

mukry suraya
Guest
mukry suraya

ok entar dicoba di blog saya gan… terimakasih infonya

Rhinal Naldi
Guest
Rhinal Naldi

tanks gan.!! ini yang ane cari..!! akhirnya dapat

Anewnime Author
Guest
Anewnime Author

kalo ane pasang caranya mbak arlina apakah sama ?

verincia angel
Admin

mba arlina siapa ya

Anewnime Author
Guest
Anewnime Author

arlinadsgn

Close Menu