Rabu, 14 Maret 2018

Cara Memasang Video Youtube Full Responsive di Blog (Blogger/Blogspot)


Cara Memasang Video Youtube Full Responsive di Blog (Blogger/Blogspot) – Menambahkan video youtube di blog sudah lumrah di lakukan oleh berbagai blogger, baik itu video dari saluran youtube mereka sendiri maupun video orang lain.

Sebab selain mengembed video youtube di blog itu legal dan di perbolehkan oleh Google, dengan memanfaatkan fitur embed video youtube, sebagai seorang blogger tentunya kita juga mendapatkan banyak keuntungan, salah satunya adalah bisa membuat blog lebih keren dan artikel yang kita buat lebih bernilai.

Akan tetapi, embed video tidak bisa asal. Sebab video embed dari yotube itu tidak responsive. Untuk itu supaya tampilan blog Anda ketika di akses via HP tidak berantakan. Maka teman-teman harus membuat video youtube yang kalian embed menjadi responsive. Bagaimana caranya ? silakan baca panduan lengkapnya di bawah ini.

Cara Memasang Video Youtube Full Responsive di Blog


Cara Memasang Video Youtube Full Responsive di Blog (Blogger/Blogspot)

Langkah Pertama, buka video youtube yang ingin teman-teman tambahkan di situs webs/blog, lalu ambil kode embednya. Jika kalian belum mengetahui bagaimana cara mengambil kode embed video youtube, silakan baca panduan berikut tutorial ambil dan pasang kode embed youtube.

Contoh kode embed youtube

<iframe width="560" height="315" src="https://www.youtube.com/embed/EO4TYdflt3k?showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Setelah teman-teman punya kode embed, copy dan paste terlebih dahulu di notepad.

Langkah kedua, Akses akun blogger kalian. Pada dashboard Blogger, pilih Tamplate (Tema) >>> Edit HTML

Cari kode “]]></b:skin>” atau “</style>”, supaya lebih cepat tekan tombol CTRL+F pada keyboard PC yang Anda gunakan. Lalu pastekan/tempel/tambahkan kode berikut di atasnya.

/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Langkah ketiga, copy pastekan script di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

Keterangan :
Untuk merubah ukuran supaya sesuai dengan selera kalian, silakan rubah angka “281” dan “500” dengan angka yang kalian inginkan.

Langkah ke empat, Klik simpan template. Selesai.

Baca juga:

Apakah dengan cara ini setiap kali Anda menambahkan video dari youtube ke blog, video tersebut menjadi responsive dan mampu menyesuaikan lebar alat yang mengaksesnya ?, tidak!!!, jika kalian tidak melakukan embed yang benar, untuk itu jika teman-teman ingin videonya responsive. Setiap kali akan memposting artikel dan menambahkan video embed dari YouTube silahkan gunakan kode di bawah ini :

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-YOUTUBE-DI-SINI">
</div>
</div>
</div>

Untuk teman-teman yang belum tau link embed video youtube, silakan lihat kembali contoh kode embed youtube di atas. Yang Admin beri warna merah.

Dan ketika kalian menggunakan trik membuat video youtube responsive abis dengan kode di atas, teman-teman jangan heran sebab videonya tidak tampil dalam mode tulis. Untuk melihatnya berhasil atau tidak kalian harus melihat pada mode preview atau publish.

Demikianlah panduan lengkap Cara Memasang Video Youtube Full Responsive di Blog (Blogger/Blogspot). Terima kasih, selamat mencoba, dan semoga sukses.

Related Posts

Tidak ada komentar on Cara Memasang Video Youtube Full Responsive di Blog (Blogger/Blogspot)

Posting Komentar

Tolong berkomentar sesuai dengan topik di atas !!!
Harap jangan melakukan spam karena akan terdeteksi otomatis!!!
Komentar yang dianggap spam tidak akan di tampilkan!!!