Cara Untuk 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 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 ialah 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 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:

• Cara menciptakan youtube tampil keren di blog
• Cara embed youtube putar otomatis

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 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 teladan arahan embed youtube di atas. Yang Admin beri warna merah.

Dan saat kalian memakai trik menciptakan video youtube responsive abis dengan arahan 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 agar sukses.

Share this post