Cara Memasang Video Youtube Full Responsive Di Blog (Blogger/Blogspot) - Fezarzone

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 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 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:

• Cara menciptakan youtube tampil keren di blog
• Trik 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!!!, 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 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 pola isyarat embed youtube di atas. Yang Admin beri warna merah.

Dan dikala 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 biar sukses.