Cara Memasang Video Youtube Full Responsive di Blog (Blogger/Blogspot) – Menambahkan video youtube di blog sudah lumrah di lakukan oleh banyak sekali 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 yakni 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 dikala di susukan 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


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, kemudian ambil arahan embednya. Jika kalian belum mengetahui bagaimana cara mengambil arahan embed video youtube, silakan baca panduan berikut tutorial ambil dan pasang arahan embed youtube.

Contoh arahan 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 arahan embed, copy dan paste terlebih dahulu di notepad.

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

Cari arahan “]]></b:skin>” atau “</style>”, supaya lebih cepat tekan tombol CTRL+F pada keyboard PC yang Anda gunakan. Lalu pastekan/tempel/tambahkan arahan 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!!!, jikalau kalian tidak melaksanakan embed yang benar, untuk itu jikalau teman-teman ingin videonya responsive. Setiap kali akan memposting artikel dan menambahkan video embed dari YouTube silahkan gunakan arahan 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 pola arahan embed youtube di atas. Yang Admin beri warna merah.

Dan dikala kalian memakai trik menciptakan video youtube responsive abis dengan arahan di atas, teman-teman jangan heran alasannya 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 biar sukses.

No comments:

Post a Comment

Bottom Ad [Post Page]

| Designed by Colorlib