Cara Membuat Video Youtube Responsive di Blog Template Newser

Advertisement
Advertisement
Cara Membuat Video Youtube Responsive di Blog Template Newser | Malam ini aku baru saja mengganti template blog Armaila.com dari template VioMagz ke template Newser. Banyak hal yang harus dibenahi salah satunya adalah Membuat Video Youtube Responsive di Blog pada template yang baru ini.

Aku mencoba googling dan membaca beberapa panduan yang dishare oleh teman teman blogger dan baru berhasil pada artikel "https://blogaeres.blogspot.com/2019/03/cara-memasang-video-youtube-responsive.html"

Cara Membuat Video Youtube Responsive di Blog Template Newser

Dan berikut ini rincian panduan yang berhasil untuk kasus ku ini.

Langkah 2: Tempelkan (paste) HTML videonya di postingan Anda pada mode HTML. Selesai, boleh dipublish.

Cara Agar Video Youtube Menjadi Responsive

Perhatikan bahwa ukuran width="560" dan height="315" dari HTML di atas adalah rasio lebar-tinggi standar untuk YouTube di desktop adalah 16:9, boleh hitung sendiri, nilainya 1.77:1. Nah, cara yang saya lakukan agar video youtube menjadi responsive di postingan blog adalah dengan menggunakan rasio tersebut pada settingan tampilan CSS Media Query untuk berbagai resolusi.
Langkah 3: Buka Blogger > Tema > Edit HTML. Tambahkan kode CSS berikut sebelum ]]></b:skin>.
/* Video Youtube Responsive */ .post-body iframe,.post-body embed,.post-body object{max-width:100%;max-height:auto} @media screen and (max-width:768px){.post-body iframe,.post-body embed,.post-body object{height:432px}} @media screen and (max-width:600px){.post-body iframe,.post-body embed,.post-body object{height:337.5px}} @media screen and (max-width:480px){.post-body iframe,.post-body embed,.post-body object{height:270px}} @media screen and (max-width:320px){.post-body iframe,.post-body embed,.post-body object{height:180px}}
Langkah 4: Simpan Tema.

Sumber: blogaeres
#NelponUnlimitedTsel
#50GbFlashTsel #Paket1500SmsArmaila
Advertisement