Cara Membuat Ukuran Video Youtube Menyesuaikan di Halaman Blogspot

100REDESIGN - Banyak orang mengalami masalah tentang ukuran video youtube yang diposting di blogspot.

Ukurannya itu kadang sudah bagus ketika dibuka di layar laptop, tapi ketika dibuka via handphone, ukuran tampilan video youtubenya ngak menyesuiakan otomatis.

Ukurannya kebesaran bahkan ada juga malah ukurannya kekecilan. Akibatnya pengunjung blog jadi ngak enak menyaksikan tutorial kita.

Nah, solusinya mudah saja. Ada beberapa langkah yang harus dibuat.

langkah di atas yang akan kita lakukan satu persatu. Penjelasan rinci dan kode script saya sudah letakan di bawah ini ya.

Untuk Preview hasilnya, seperti ini tampilannya di perangkap laptop atau pun handphone.


Tampilan Youtube dari Perangkat Laptop


Tampilan Youtube di Perangkat Handphone
Atau teman-teman bisa melihat langsung tayangan di blog soal script ini bisa dilihat hasilnya dulu di halaman ini ( DEMO)

Kalau sudah pas di hati, ayuk sekarang kita buat langkah-langkahnya. Berikut cara mudah yang bisa dilakukan.

Buka Halaman Editor HTML blog teman-teman Masukan Code script di bawah ini ke halaman CSS < Style>

.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Masukan Code embed Video Youtube ke dalam script postingan di bawah kode warna biru

<div class="youtube-responsive-container">
<!-- Kode Temple Video Youtube di Sini -->
</div>

Kalau mau pelajari lagi detailnya seperti apa, teman teman bisa langsung nonton video tutorialnya di sini:
Video Tutorial Memasang Script Responsive

 Silakan publikasikan atau terbitkan postingan dan lihat hasilnya.

Oke, saya kira itu saja tutorial kali ini. Semoga bermanfaat ya buat penerapannya di blog teman-teman. 

Berbagi :