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
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.
terimakasih. nanti saya coba ah.
BalasHapus