2 Langkah Cara Memasang Embed Video Youtube Responsive
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.
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.
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
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.
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
Originally published at nginy.net on November 6, 2017.
