Cara Membuat Video Youtube Responsive di Blogger [Blogspot]
22.26 / Unknown / Edit Template,
Mengapa Video Youtube Responsive itu penting? Masih ingat dengan postingan yang lalu tentang Cara Membuat Scroll Responsive? Bagi anda yang menggunakan Template Blogger yang responsive hal ini sangat wajib. Jika anda tidak memasang video youtube responsive, tampilan di handphone/ tablet akan berantakan.
Oleh karena itu, MasGugu menyarankan untuk menggunakan video youtube responsive. Dengan kode responsive, semuanya menjadi tertata rapi mengikuti layar smartphone/ tablet yang anda pakai. Jika handphone anda kecil video youtube akan ikut mengecil menyesuaikan layar handphone anda, begitu juga sebaliknya.
1. Pasang Kode CSS Youtube
Langkah pertama untuk cara memasang video responsive pada blogger, silahkan login dulu ke blogger lalu pergi ke Template => Edit HTML. Pada kode yang banyak tersebut, silahkan anda klik disembarang tempat. Kemudian tekan Ctrl + F pada keyboard PC/ Laptop anda. Lalu paste kode ini ]]></b:skin> setelah ketemu, kemudian copy kode yang ada di bawah ini.
<style type='text/css'>
.ResponsiveVideo {position:relative;padding-bottom: 56.25%;padding-top:25px;height:0;}
.ResponsiveVideo iframe, video, object, embed {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
Setiap template berbeda-beda ada yang diletakkan di atas kode ]]></b:skin> ada juga yang diletakkan di bawah kode ]]></b:skin> silahkan sesuaikan saja dengan template blogspot milik anda. Jika tidak berhasil diletakkan di atas kode tersebut anda coba letakkan di bawah kode itu.
2. Ambil Kode Video Youtube
Silahkan anda cari video youtube yang akan diletakkan pada blogspot, setelah ditentukan copy kode embed video tersebut. Bagaimana cara ambil kode embed di youtube? Silahkan anda putar video yang ingin anda ambil kodenya, lalu scroll ke bawah lalu klik BAGIKAN lalu pilih SEMATKAN yang berada di sebelah kanan tulisan BAGI. Lihat gambar di bawah.
Susunan kode embed youtube tersebut adalah seperti di bawah ini. Kemudian, silahkan anda hapus kode yang di beri warna merah, agar bisa lanjut ke tahap berikutnya.
<iframe width="560" height="315" src="https://www.youtube.com/embed/PCifmGoUUls" frameborder="0" allowfullscreen></iframe>
Setelah anda hapus kode yang diberi warna merah, maka hasilnya akan seperti di bawah ini.
<iframe width="560" height="315" src="https://www.youtube.com/embed/PCifmGoUUls"></iframe>
3. Membuat Video Youtube Responsive
Nahh... tahap berikut ini adalah membuat video youtube menjadi responsive. Silahkan anda tambahkan kode ini <div class="ResponsiveVideo"> di depan kode embed yotube di atas, lalu tambahkan kode ini </div> di belakang kode embed youtube. Sehingga akan menjadi seperti kode di bawah ini.
<div class="ResponsiveVideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/PCifmGoUUls"></iframe></div>
SELESAI...Silahkan anda copy kode yang telah dibuat responsive tersebut ke postingan anda. jangan paste di bagian COMPOSE, tetapi paste di bagian HTML lalu klik ke bagian COMPOSE untuk melihat apakah video muncul atau tidak. Jika video tidak muncul, berarti anda salah menggabungkan kode embed video youtube dengan kode responsive. Silahkan anda ulangi lagi dengan teliti agar berhasil.
Untuk melihat hasil video responsive atau tidak, silahkan anda PUBLISH artikel yang telah anda beri video youtube tadi, lalu anda buka artikel yang telah anda Publish tadi dari handphone/ tablet. TARAA.... Hasilnya 100% berhasil, video youtube menjadi responsive sesuai dengan layar smartphone/ tablet anda.
Jika ada yang ingin anda tanyakan tentang artikel Cara Membuat Video Youtube Responsive di Blogger [Blogspot] silahkan bubuhi melalui komentar saja. SALAM BLOGGER, semoga bermanfaat bagi pembaca. Terimakasih telah datang, silahkan datang lagi besok ahehehehe....
http://masgugu.blogspot.co.id/2015/12/cara-membuat-video-youtube-responsive.html
0 Response to "Cara Membuat Video Youtube Menjadi Responsif di Blog"
Post a Comment