Cara Agar Video Youtube Tampil Responsive di Blog

Hello kawan selamat menikmati disiang hari bolong ini, Kali ini saya akan berbagi tips dan trik blog tentang bagaimana membuat agar video youtube bisa tampil responsive pada blog? Apa gunanya, tentunya akan membuat pengunjung blog semakin mudah dalam melihat info-info penting dari video youtube yang anda upload.

Nah masih penasaran dengan bagaimana bisa menampilkannya disini saya akan mengulas secara lengkap tutorial membuatnya denga simpel dan working, ada beberapa tahap pembuatannya yaitu mulai dari CSS, HTML dan Javascript. namun ini tidak memberikan efek berat pada blog.

Okelah langsung saja berikut ini beberapa tahap pemasangannya simak secara detail ya karena salah sedikit anda akan gagal memaksimalkan responsivenya.

Cara Agar Video Youtube Tampil Responsive di Blog

Cara Agar Video Youtube Tampil Responsive di Blog :

  • Pasang kode berikut ini diatas kode
.videoyoutube{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}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
  • Silahkan anda pakai kode berikut ini untuk memasang dan memunculkan video responsive pada blog anda.
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>
    </div>
    </div>

  • Warna merah silahkan anda ganti dengan kode embed youtube yang ingin anda tampilkan.
  • Kemudian silahkan anda copy kode dibawah ini dan anda pastekan tepat diatas kode
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
  • Dan perlu anda ingat! Blog anda sudah dilengkapi kode jquery library berikut ini :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
&lt;/script&gt;

Itulah Cara Anyar Memasang Video Youtube Responsive pada Postingan Blog Kita , Oh iya sebagai LIVE DEMO-nya silahkan nikmati video Indah nevertari Gangsta - Lumpuhkan Ingatanku di bawah ini. Silahkan coba resize layar monitor Anda dengan menekan tombol CTRL + Scroll Atas / Bawah pada keyboard dan mouse Anda, atau coba test halaman ini dengan responsive tool. 

14 Responses to "Cara Agar Video Youtube Tampil Responsive di Blog"

  1. Kunjungan siang gan, follback dong hehe

    BalasHapus
  2. Kunjungan siang gan, follback dong hehe

    BalasHapus
  3. makasi atas infonya Mas..komplit penjelasannya..!

    BalasHapus
  4. wahhh mantaf nih gan infonya jujur saya baru tahu hehe salam kenal yah gan dari Cinta Teknologi

    BalasHapus
  5. wah triknya bgus sob, saya coba prktekkan

    BalasHapus
  6. Kunjungan pagi sob... sekalian mau promo Kontes SEO nggak apa2 kan..
    saya mulai ya (memohon dengan tangan mengatup)

    Pengumuman..
    dibuka pendaftaran Kontes SEO Penitishop.com
    dengan hadiah total 2.500.000 dan beberapa kaos T-Shirt Distro
    dengan kata kunci
    "Penitishop.com, Jual Almamater Terbaik"

    Pendaftaran dibuka 10 nov 2014 - 10 februari 2015
    pengumuman pemenang 15 februari 2015
    penyerahan hadiah 16 februari 2015

    ayo ikut kawan2ku semua, siapa tau kita jadi pemenangnya
    info lengkap di aplikita.com ya kawan...

    makasih sebesar-besarnya buang bang Mahrus

    BalasHapus
  7. Wah bisa ikutan tuh mas lumayan tuh gede banget komisinya :v

    BalasHapus
  8. Artikelnya keren2 sekali mas gan

    BalasHapus
  9. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
    Balasan
    1. wawwww.... iklan atau promosi blog gan

      Hapus
  10. Nice inpoh Mas, iklanya banyak

    BalasHapus

Jangan cuma dibaca aja, tinggalin komentar juga ya...