Membuat Tampilan Youtube Responsive di Blog

Membuat Tampilan Youtube Responsive di Blog - Sudah berapa lama nih update postingan disini, kali ini saya akan mencoba membuat tampilan youtube yang bisa kita pasang di blog agar bisa responsive. Kenapa harus responsive? seiring berkembangan responsive di dunia internet ini kita harus mengikuti dan menyesuaikannya embed, salah satunya adalah Youtube

Sebenarnya kita hanya memodifikasi pada embed agar tampilan yang akan terlihat bisa menyesuaikan device yang kita pakai. 
youtube responsive
Langsung saja simak tutorialnya berikut ini :
1. Simpan Jquery pada edit HTML dan letakkan diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
2. simpan Kode kode CSS di atas kode ]]></b:skin> atau </style>
.ytbvideo{
    text-align: center;
    background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
    border:1px solid #A8A8A8;
    border-radius:5px;
    margin:20px auto;
    width:80%;
    box-shadow: 1px 30px 30px -26px #818181;
}
.res-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.res-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}
3. Simpan kode javascrip berikut diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.ytbvideo').each(function(){
$(this).replaceWith('<iframe class="ytbvideo loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script>
4. Selanjutkan kita menuju ke postingan dan masukkan kode
<div class="ytbvideo">
<div class="res-video">
<div class="ytbvideo loader" data-src="//www.youtube.com/embed/hX3XaILYM2c"></div>
</div>
</div>
Semoga bermanfaat
resource: http://www.kompiajaib.com/2014/02/modifikasi-tampilan-video-youtube.html

20 Responses to Membuat Tampilan Youtube Responsive di Blog

  1. Walah Bang :D , Coba Dulu Nih :D

    ReplyDelete
  2. Kalo responsive nontonnya jadi lebih enak gitu, Bang?

    ReplyDelete
    Replies
    1. iya beb, adi enak saat menonton di semua device :)

      Delete
    2. Semua manggil beb dong, baru tersadar :D

      Delete
    3. iya mas kan namanya beby, terus dipanggil beb di kira pacarnya,hehe :D

      Delete
  3. wah... sepertinya nggak terlalu sulit, kodenya juga nggak terlalu banyak, ijin kopi kode dan mempraktekannya yia bos...

    ReplyDelete
    Replies
    1. kurang lebih sperti itu, silahkan mas di coba :D

      Delete
  4. Saya juga menggunakan data-src tp gak pakai css :D

    ReplyDelete
    Replies
    1. iya sist, bisa tuh tinggal atur ukurannya aja :)

      Delete
  5. Replies
    1. iya tapi youtube sekaang tidak bisa di klik kanan, ntah itu karena browser saya atau gmna, :D

      Delete
    2. Gak bisa gimana mas ? Saya bisa kayaknya :D

      Delete
    3. berarti memang di pc saya gak bisa di klik kanan..

      Delete
  6. saya ambil ilmu bikin tampilan youtube responsifnya kang, seringkali saat bikin postingan yang menampilkan youtube suka jadi ngga responsif dan ngga valid HTML 5.
    makasih ilmunya ya

    ReplyDelete
    Replies
    1. terima kasih kembali :) semoga bisa bermanfaat.. :D

      Delete
  7. wah bagus juga nih mas kalau bisa responsive tampilan youtubenya, makasih sharingnya mas :)

    ReplyDelete
    Replies
    1. makasih kembali mas eka,, lama nih gak mampir :D

      Delete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔