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 aneka macam 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 yaitu 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 saat di kanal via HP tidak berantakan. Maka teman-teman harus menciptakan video youtube yang kalian embed menjadi responsive. Bagaimana caranya ? silakan baca panduan lengkapnya di bawah ini.
Cara Memasang Video Youtube Full Responsive di Blog
Langkah Pertama, buka video youtube yang ingin teman-teman tambahkan di situs webs/blog, kemudian ambil isyarat embednya. Jika kalian belum mengetahui bagaimana cara mengambil isyarat embed video youtube, silakan baca panduan berikut tutorial ambil dan pasang isyarat embed youtube.
Contoh isyarat 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 isyarat embed, copy dan paste terlebih dahulu di notepad.
Langkah kedua, Akses akun blogger kalian. Pada dashboard Blogger, pilih Tamplate (Tema) >>> Edit HTML
Cari isyarat “]]></b:skin>” atau “</style>”, supaya lebih cepat tekan tombol CTRL+F pada keyboard PC yang Anda gunakan. Lalu pastekan/tempel/tambahkan isyarat 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 bisa menyesuaikan lebar alat yang mengaksesnya ?, tidak!!!, kalau kalian tidak melaksanakan embed yang benar, untuk itu kalau teman-teman ingin videonya responsive. Setiap kali akan memposting artikel dan menambahkan video embed dari YouTube silahkan gunakan isyarat 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 teladan isyarat embed youtube di atas. Yang Admin beri warna merah.
Dan saat kalian memakai trik menciptakan video youtube responsive abis dengan isyarat di atas, teman-teman jangan heran lantaran 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 supaya sukses.
0 Response to "Cara Memasang Video Youtube Full Responsive Di Blog (Blogger/Blogspot)"
Post a Comment