Cara Memasang Video Youtube Responsive Di Dalam Postingan Dengan Embed
Di dunia internet terdapat dua sumber informasi terpopuler yang sering kita manfaatkan untuk berbagai hal dalam mencari atau mempelajari sesuatu. Dua sumber tersebut yaitu website/blog dan youtube yang menyajikan berbagai informasi dan tutorial tentang apapun yang kita cari.
Seperti contohnya pada blog saya ini yang yang akan membagikan tutorial tentang cara memasang video youtube responsive di blog dengan Embed.
Tutorial ini sengaja saya buat untuk kalian yang mempunyai blog, terutama blog dengan konten yang membahas tutorial lalu ingin menampilkan Video youtube di dalamnya.
Dengan menampilkan video youtube pada artikel yang membahas tentang tutorial, ini merupakan cara terbaik untuk memperjelas tutorial yang anda sampaikan pada pembaca, sehingga memudahkan pembaca untuk cepat memahaminya. Karena setelah pembaca memahami artikel anda kemudian mereka bisa langsung melihat prakteknya pada embed video youtube yang anda pasang di artikel tersebut.
Lalu bagaimana cara memasang Embed video youtube pada artikel agar responsive sesuai ukuran layar? Berikut langkah-langkahnya:
Cara Memasang Video Youtube Responsive Di Dalam Postingan
Untuk memasang Embed agar video youtube tampil responsive di dalam artikel blog, saya akan memberikan kode javascript,jquery,html dan css untuk Embed sehingga video youtube di dalam postingan blog menjadi responsive di semua ukuran layar.
Codenya :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('iframe[src*="youtube.com"]').css({"width": "100%","height": "100%","position": "absolute","top": "0","left": "0"});
$('iframe[src*="youtube.com"]')
.wrap('<div style="height:0;width:100%;position:relative;margin:0 auto;padding-bottom:56.25%;overflow:hidden"></div>');
$('iframe[src*="youtube.com"]').each(function() {
$(this).attr("src")
});
});
//]]>
</script>
Untuk memasangnya copy kode tersebut pada template blog anda dan letakan di atas tag </body>.
Setelah selesai maka embed video youtube responsive sudah bisa di tambahkan pada artikel di blog anda.
Untuk memaksimalkannya kita perlu menghilangkan Autoplay menjadi default embed sehingga video tidak terputar secara otomatis.
Berikut code default embed youtube:
<iframe width="854" height="480" src="https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Kemudian hapus kode yang berwarna biru di atas sampai menjadi seperti di bawah:
<iframe width="854" height="480" src="https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder="0" allowfullscreen></iframe>
Penghapusan tersebut agar video youtube responsive di dalam postingan tidak berputar secara otomatis.
Itulah cara memasang embed video youtube di dalam artikel blog. Cara ini bisa anda coba pada artikel atau postingan yang ingin menampilkan video youtube di dalamnya. Semoga berhasil..