Cara Membuat Ukuran Video Responsive Pada Postingan Blog

Di dalam sebuah postingan blog, video menjadi salah satu objek tambahan yang dapat dimanfaatkan agar postingan blog menjadi lebih menarik. Informasi dapat disuguhkan kepada pengunjung blog dalam bentuk audio dan visual, diluar dari informasi teks. Video juga dapat disematkan ke dalam postingan blog sebagai informasi pelengkap untuk menjelaskan sesuatu yang sulit digambarkan dengan kata-kata.

Memasukan video ke dalam postingan blog adalah satu hal. Namun, merubah ukuran video yang tampil pada postingan blog adalah suatu hal yang lain. Video umumnya tampil dengan ukuran default. Ukuran ini umumnya tidak memuaskan bagi beberapa blogger yang menggunakan template tertentu. Kenapa? Karena beberapa template mempunyai content area yang sangat lebar, atau bahkan kecil. Sehingga video yang tampil bisa terlihat terlalu besar atau terlalu kecil.

Dalam kasus ini, sebenarnya kita dapat mengubah ukuran dari frame video tersebut. Terdapat 2 cara yang dapat kita lakukan untuk mengubah ukurannya, yaitu:

1. Cara Manual
   Dengan cara ini kita dapat mengatur ukuran frame video yang tampil, dengan nilai angka yang kita tentukan sendiri. Angkanya bebas kita tentukan, namun video yang memiliki frame besar akan terlihat terpotong jika tambil di layar atau jendela browser yang kecil. Tutorial untuk cara manual bisa dibaca disini...
2. Cara Otomatis / Responsive Size
   Responsive size adalah ukuran yang secara otomatis menyesuaikan dirinya sendiri sesuai dengan luas layar ataupun luas jendela browser yang digunakan. Frame video akan tampil secara penuh diberbagai ukuran jendela browser, baik kecil maupun besar. Cara untuk mendapatkan responsive size pada frame video di dalam postingan blog akan dibahas lebih lanjut di bawah.

Contoh frame video dengan responsive size. Coba untuk mengecilkan dan membesarkan jendela browser (jika dibuka melalui desktop pc atau laptop)!

Cara Membuat Ukuran Video Responsive Pada Postingan Blog

Diperlukan 2 hal untuk membuat ukuran frame video yang responsive, yaitu code CSS di dalam template blog & code pemanggil untuk menggunakannya.

1. Masukan code CSS berikut ke dalam template blog. Letakan di atas ]]></b:skin>
   
   
   .video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px; height: 0; overflow: hidden;
   }
   .video-container iframe,
   .video-container object,
   .video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   }
   
   
2. Simpan perubahan pada template.
3. Buka postingan atau buat postingan baru.
4. Masukan video ke dalam postingan. Bisa langsung dari fitur "Insert video" atau memasukan embed code pada mode HTML.
5. Masuk ke mode HTML dan cari embed code dari video yang sudah dimasukan. Code dimulai dengan <iframe... dan diakhiri dengan </iframe>
6. Tambahkan code <div class="video-container"> tepat sebelum code <iframe... dan tambahkan juga code </div> tepat setelah code </iframe>. Contoh penggunaan;
   
   
   <div class="video-container"> <iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/**/********/*.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/*********?feature=player_embedded" width="320"></iframe> </div>
   
   
7. Selesai! Hasilnya tidak dapat dilihat secara langsung melalui mode Compose. Kamu dapat melihat hasilnya melalui preview postingan atau melihat postingan secara langsung setelah dipublish.

Cara ini memiliki satu kekurangan yang menurut Akira tidak terlalu berarti. Yaitu video akan selalu memiliki ukuran lebar (width) sebesar content area dari blog. Jadi kamu akan cukup kesulitan untuk mendapatkan ukuran video yang kecil namun responsive. Akira sendiri belum menemukan caranya. Jika kamu hanya memperkecil nilai angka pada height dan width pada code CSS, maka kamu mendapati ukuran frame video yang lebih kecil, namun posisi video tidak akan bisa diletakan di posisi tengah postingan. Bahkan align center juga tidak akan membantu.

Penutup
Diluar dari cara otomatis atau responsive yang memerlukan sedikit penambahan code CSS ke dalam template blog, sebenarnya kamu bisa juga melakukan cara manual dimana kamu dapat mengatur sendiri ukuran tinggi dan lebar dari frame video. Caranya bisa kamu lihat di sini...

Artikel ini informatif? Temukan juga artikel informatif lainnya seputar dunia game dan teknologi di weakwings.blogspot.com sankyu...

author: Akira Asayami