Alhamdulillah akhirnya bisa responsive juga video yang kemaren admin share,belakangan ini banyak pemilik blog atau website sisipkan video diblog nya.
Kali ini admin dapatkan kode dari contohblog.com, kebetulan apa yang di share responsive diblog admin. Ada dua cara yang diberikan dari yang simple sampai yang agak ribet.
1. buka video youtube yang anda ingin tampilkan
2. Share dan semat kan kode embedd
Khusus yang pakai handphone , buka browser bawaan hp anda ketik kan youtube.com klik titik 3 pengaturan situs desktop tahan agak lama nanti ada jendela popup semat kan kode klik aja.
3. Copy kode embedd nya.
*************** contoh kode embedd ****************
<iframe width="932" height="524" src="https://www.youtube.com/embed/UANi5NqkrLk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4.hapus ifame widht jadi 100%
.hapus height nya jadi 400
.hapus kode autoplay.
Nah kode yang di modif tadi yang dimasukkan biasa anda menulis artikel dengan mode HTML ya, itu cari yang simple anda tinggal publish aja.
<iframe width="100%" height="400" src="https://www.youtube.com/embed/UANi5NqkrLk" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
1.Cara yang agak ribet seperti ini, lakukan langkah dari nol 1 sampai no 3.
<div class="youtube-responsive-container"><!--kode embedd video youtube disini--></div>
2.Copas kode diatas ke mode HTML.3. Publish.
Biar menjadi responsive tambahkan, copas kode CSS dibawah ini letakkan diatas [[</b:skin>
.youtube-responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Catatan cara pertama memang hasil nya kurang bagus terutama masalah di height dan ada menyisakan background hitam divideo terutama jika di buka dari hp, saran admin lebih baik melakukan cara yang ke-dua.
Jadi anda harus memasang kode dibawah ini, setiap kali anda memposting video diblog.
</div class="youtube-responsive-container"><!--kode embed video youtube disini--></div>
Ini hasil dari cara yang ke-2 jika anda memasang nya dengan benar maka seperti ini tampilan nya, selamat mencoba.
Special thanks you for www.contohblog.com yang sudah membagikan toturialnya.