Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Paling Gampang Membuat Video Youtube Responsive di Blogspot

Cara Paling Gampang Membuat Video Youtube Responsive di Blogspot – Sebelumnya Admin telah memberikan banyak tutorial yang berkaitan dengan youtube. Seperti membuat tampilan youtube keren abis, youtube berputar otomatis, teknik embed youtube, dan bagaimana cara menjadikan video youtube jadi full responsive dengan menggunakan kode java script.

Walaupun pembahasan ini sedikit banyak memiliki kesamaan dengan tutorial membuat tampilan embed video youtube responsive sebelumnya, tapi cara yang bakal Admin bagikan kali ini jauh lebih gampang untuk di terapkan dan mudah untuk di praktekkan. Serta sangat ringan untuk di pasang pada blog kesayangan agan aganwati sekalian, sebab trik membuat video jadi responsive kali ini tidak menggunakan kode java script tapi murni hanya menggunakan kode CSS saja.

Cara Paling Gampang Membuat Video Youtube Responsive di Blogspot

Bagaimana apakah kalian tertarik, jika kalian penasaran seperti apa tampilan video youtube yang di embed dengan menggunakan trik ini. Teman-teman ngak usah jauh-jauh atau bingung melihat blog demonya. Karena blog yang sedang kalian kunjungi saat ini juga menggunakan cara ini. 

Masih tidak percaya kalau dengan menggunakan teknik ini video apapun yang sobat embed bisa menjadi full responsive dan dapat secara otomatis menyesuaikan lebar alat yang di gunakan untuk mengaksesnya. Silakan kalain cek salah satu postingan kami yang di dalamnya ada video yang di sematkan, salah satunya Cara Terbaru Membuat Akun Email Gmail Tanpa Verifikasi.

Jika kalian ingin mencoba, dan ingin membuktikannya secara langsung kalau dengan menggunakan cara ini semua jenis video yang sobat embed jadi responsive alias bisa menyesuaikan lebar semua perangkat yang mengaksesnya secara otomatis, silakan ikuti langkah-langkah di bawah ini.

Tutorial Lengkap Cara Membuat Video Youtube Responsive di Blogspot Hanya Dengan Kode CSS


Pertama, silakan kawan-kawan login terlebih dahulu ke akun bloggernya masing-masing.

Pada halaman dashboard blogger, klik template (tema) >>> Edit HTML >>> Lalu cari kode “]]></b:skin>” tanpa tanda kutip. 

Tips : Supaya lebih mudah menemukan kode “]]></b:skin>” dalam template blogspot kalian. Klik di sembarang tempat di dalam area kode lalu tekan CTRL+F. Setelah itu akan muncul di pojok kanan atas kotak untuk memasukkan kata-kata yang ingin kalian cari. Pastekan kode tadi di kotak yang di sediakan lalu ekan Enter. 

Setelah itu kalian akan melihat kode “]]></b:skin>” yang di beri warna kuning. Jika pada template blogger yang sobat pakai tidak ada kode ini, maka solusinya cari kode </style>.

Setelah kalian menemukan kode tersebut, copy pastekan script CSS di bawah ini tepat di atasnya.

/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}

Supaya lebih jelas, silakan kawan-kawan lihat gambar di bawah ini.

Cara Paling Gampang Membuat Video Youtube Responsive di Blogspot

Keterangan :
No 1 : Tempat memasukkan kode pencarian
No 2 : Tempat meletakkan kode CSS youtube responsive.

Klik simpan template.

Selesai, mulai saat itu juga semua jenis video yang sobat embed bakal menjadi responsif, untuk membuktikan kebenarannya. Kawan-kawan bisa langsung praktek, jika ada masalah atau saran yang bersifat membangun, silakan masukkan pada kotak komentar di bawah ini.

Demikianlah informasi terbaru yang bisa Admin persembahkan untuk pengunjung setia blogtipsintrik.com mengenai “Cara Paling Gampang Membuat Video Youtube Responsive di Blogspot”, terima kasih semoga bermanfaat.

3 komentar untuk "Cara Paling Gampang Membuat Video Youtube Responsive di Blogspot"

  1. terima kasih atas penjelasannya yang tepat

    BalasHapus
  2. Alhamdulilllah ! Terima kasih banyak Gan ! Akhirnya bisa juga !

    BalasHapus
  3. Terima kasih, ini betul-betul cara yang paling gampang, diantara banyak cara yg pernah sy baca, sekali lagi terima kasih

    BalasHapus

Tolong berkomentar sesuai dengan topik di atas !!!
Harap jangan melakukan spam karena akan terdeteksi otomatis!!!
Komentar yang dianggap spam tidak akan di tampilkan!!!
Masukkan link pada kotak yang di sediakan...jangan dalam komentar.