Dalam sebuah postingan blog, video menjadi salah satu objek tambahan yang dapat dimanfaatkan agar postingan blog menjadi lebih menarik sehingga membuat pengunjung betah berlama lama diblog kita. Informasi yang dapat diberikan kepada pengunjung blog bentuk audio dan visual, selain informasi teks yang diberikan. Video juga dapat dimasukan ke dalam postingan blog sebagai salah satu sumber informasi pelengkap untuk menjelaskan dan menggambarkan sesuatu yang sulit dijelaskan dengan kata-kata.
 |
| Cara Merubah Ukuran Video Responsive Pada Artikel Blog |
Video umumnya tampil dengan ukuran normal. Ukuran ini umumnya tidak sesuai ukuranya yang pastinya tidak memuaskan bagi sebagian pengguna blogger yang menggunakan template tertentu serta tidak sesuai di hanpone pengunjung. Kenapa? Karena beberapa template mempunyai content area yang sangat lebar dan hp memiliki layar yang lebih kecil. Sehingga video yang ditampilkan bisa terlihat terlalu besar juga bisa terlalu kecil.
Cara Otomatis mengubah ukuran vidio atau di sebut Responsive size :
Penjelasan Responsive size sendiri yaitu ukuran vidio yang secara otomatis menyesuaikan ukuran vidio sesuai dengan luas layar baik laptop maupun hp serta Frame video juga akan tampil secara penuh diberbagai ukuran browser.
Pada postingan kali ini dibutuhkan 2 langkah untuk merubah ukuran video yang responsive,
Pertama yaitu kita harus merubah code CSS di dalam template blog tersebut dan inilah code untuk menjalankannya
1. Kalian Wajib Masukan code CSS dibawah ini ke dalam template blog kalian. dan pastikan kalian meletakan code 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. Kalian wajib Simpan perubahan pada template blog.
3. Buka postingan blog kalian atau kalian bisa buat postingan baru.
4. Masukan video yang kalian inginkan ke dalam postingan. disini ada dua cara memasukkan vidio yaitu Bisa langsung dari fitur "Insert video" atau dengan cara memasukan embed code yang sudah disediakan pada vidio ke mode HTML.
5 Masuk ke mode HTML dan cari embed code dari video yang biasanya sudah tersedia di menu share vidio. Code tersebut dimulai dengan <iframe... dan diakhiri dengan tulisan </iframe>
6. Kalian wajib Tambahkan code <div class="video-container"> tepat didepan code <iframe... dan jangan lupa tambahkan juga code </div> tepat sesudah 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! kalian tidak akan bisa melihat secara langsung melalui mode Compose. Kalian hanya dapat melihat hasil melalui preview postingan atau bisa melihat postingan secara langsung setelah dipublikasikan.
Cara diatas juga tentunya memiliki satu kelemahan yang tidak terlalu penting. Kelemahannya yaitu video akan selalu memiliki ukuran lebar sebesar konten area dari blog itu sendiri.
