Cara Agar Ukuran Video Youtube Responsive Pada Blog

Halo teman-teman blogger, kita tahu bersama bahwa salah satu yang membuat sebuah artikel lebih menarik dan informatif saat ini adalah adanya video yang menggambarkan dari keseluruhan isi artikel yang kita paparkan. Dan fasilitas terbaik untuk mengambil video saat ini dan belum ada yang bisa menandinginya adalah youtube, karena youtube merupakan web share hosting video milik raksasa internet yakni mbah Google. Sehingga kita tidak perlu khawatir dengan kehandalannya dari berbagai segi seperti bandwith, spase, dan kecepatan loading.

Youtube Responsive

Masalah yang sering dijumpai oleh para blogger adalah bagaimana agar ukuran video youtube mengikuti ukuran tampilan browser, karena kode embed share pada youtube telah menentukan ukuran tertentu sehingga sehingga kadang tidak pas dengan ukuran browser pada desktop dan gadget yang digunakan oleh pembaca misalnya ukuran browser pada smartphone dan tablet pasti berbeda dengan ukuran komputer dekstop atau laptop sehingga dibutuhkan sebuah cara untuk membuat kode embed yang mampu menyesuaikan ukuran video youtube agar responsif.

Saat ini trik yang paling banyak dijumpai adalah dengan mengubah kode embed pada youtube dan menginjek kode tambahan pada css style editor baik untuk blog dengan platform wordpress maupun blogspot. Namun untuk kali ini, masalah tersebut akan terselesaikan dengan solusi yang akan kita bahas kali ini.

Adapun Cara Agar Ukuran Video Youtube Responsive Pada Blog bagik blogspot maupun wordpress adalah sebagai berikut :

  • Buka video youtube yang akan anda tampilkan di blog
  • Copy kode video Link Videonya, misalnya “https://www.youtube.com/watch?v=QGxyUqOmgv8
  • Sisipkan kode video (yang berwarna merah) tersebut pada kode responsive youtube dibawah ini :

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class=’embed-container’><iframe src=’https://www.youtube.com/embed//QGxyUqOmgv8 frameborder=’0′ allowfullscreen></iframe></div>

  • Copy kode di atasĀ (hilangkan tanda kutip pembukan dan penutup) lalu pasteĀ  ke blog anda pada bagian edit html untuk blogspot dan edit text untuk blog wordpress.
  • Selesai.

Demikianlah tips dan trik tentang cara agar ukuran video youtube dapat menyesuaikan pada setiap perangkat yang digunakan oleh pembaca. Terima kasih telah berkunjung di blog sederhana ini, dan jangan lupa untuk membagikan artikel ini jika bermanfaat.

Bantu kaum Dhuafa Dengan Membagikan Artikel ini...!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.