Membuat Embed Youtube Responsive di web

Membuat Embed Youtube Responsive di web

by http://www.zlearn.id/

 

Baik Kali ini saya akan bebagi tutorial bagaimana caranya membuat sebuah embed  Youtube yang responsive di suatau situs. seperti biasa jika anda ingin mendownload source code maka anda akan menjumpainya di bagain akhri dari tutorial akan di berikan link downloads

ya langsung saja ..


  • Pertama yang pasi kunjungi youtube.com
  • setelah itu pilih video yang mau anda ambil embednya
  • Lalu klik Share 
  • Dan klik embed nanti akan muncul sebuah kode kurang lebih seperti ini:
  • <iframe width="560" height="315" src="https://www.youtube.com/embed/87gWaABqGYs" frameborder="0" allowfullscreen></iframe>
  • setelah itu buat file dengan nama index.html  kemudian  ketikan kode berikut:

<!doctype HTML>
<html>
<head>
<title>Embbed</title>
<style>
.responsive-embed-youtube {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
.responsive-embed-youtube iframe, .responsive-embed-youtube object, .responsive-embed-youtube embed {
position:absolute;
top:0;
left:0;
width:40%;
height:60%;
right:10px;
}

</style>
</head>
<body>
<div class="responsive-embed-youtube"><center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/g4hGRvs6HHU" frameborder="0" allowfullscreen></iframe>
</center>
</div>


</body>

</html>

Yang mau download scriptnya silahkan download dibawah ini:





Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...