Cara Memasang Kode Embed / Semat Video Youtube Agar Responsive

Cara memasang kode embed / semat video youtube agar responsive - Hallo semuanya ! Pada kesempatan kali ini saya akan memberikan sebuah tips yaitu bagaiamana cara Embed video youtube kedalam artikel blog / website agar menjadi responsive ketika dibuka dengan semua perangkat mobile maupun pc dan video tidak terlalu besar dan terlalu kecil.

Memasukan video youtube kedalam artikel maupun website merupakan salah satu cara untuk menambah pengalaman para pengunjung ketika sedang membaca artikel blog kita. Menambahkan video juga sangatlah disarankan oleh pihak google dan hal tersebut sudah dijelaskan alasanya.

Ketika kita ingin mengambil atau memasukan video youtube kedalam sebuah artikel blog sangatlah mudah karena youtube semua video di youtube memiliki embed kode yang dimana kode tersebut bisa dipasangkan pada halaman blog maupun website umumnya.

Salah satu permasalahaan yang terjadi ketika seseorang mencoba memasukan video youtube kedalam artikel blog yaitu ukuran dari video tersebut terlalu besar dan sampai merusak tampilan blog / website. Sebenarnya untuk mengatur ukuran dari video tersebut kita bisa mengeditnya sendiri pada bagian "width" dan "height".

( Source image : premium.wpmudev*org )

Akan tetapi tidak semua blogger mampu dan faham cara mengatur ukuran didalam kode embed youtube tersebut. Alhasil video yang dipasang kerap kali terlihat terlalu besar bahkan terlalu kecil dan akan rusak ketika artikel dibuka dengan menggunakan smartphone atau versi mobile.

Untuk mengatasi itu semua tidak perlu khawatir ! Saya akan memberikan tips yang sangat berguna yaitu bagaimana cara membuat embed video youtube menjadi responsive dan secara otomatis menyesuaikan dengan ukuran serta lebar device atau perangkat yang digunakan untuk membuka halaman tersebut.


Cara Embed Video Youtube Agar Menjadi Responsive 

1). Masuk ke dasboard blogger > Edit Tema dan masukan kode CSS dibawah ini tepat di atas </style>




2). Siapkan kode embed / semat video youtube kalian.

  • Tampilan asli kode embed video youtube akan seperti ini :
<iframe width="854" height="480" src="https://www.youtube.com/embed/q99fXtN0pGE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  • Kemudian edit kode embed tersebut hingga seperti ini :
<div class="responsive-embed-youtube"><iframe src="https://www.youtube.com/embed/3c_McS4_2A8?rel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
3). Sekarang kode sudah siap dipasangkan pada artikel / halaman blog kalian.
  • Jika ingin memasukanya video tersebut kedalam artikel blog, masuk kedalam mode pengeditan HTML dan pastekan kodenya.
4). Selesai

Belum ada Komentar untuk "Cara Memasang Kode Embed / Semat Video Youtube Agar Responsive "

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel