Cara Modifikasi Tampilan Video Youtube Responsive dan SEO Friendly

Siapa yang tidak kenal dengan Youtube, Platform penyedia video terbesar dan terpopuler di jagad maya ini mempunyai banyak pemirsa dan para youtuber. Seperti yang kita ketahui Youtube selain sebagai media hiburan untuk Video dan Musik di dalamnya juga para youtuber dapat menghasilkan uang dari Video yang diuploadnya bahkan sudah banyak juga para Youtuber yang sudah membuktikan kesuksesannya.

Nah terkait Postingan kali ini akan membahas bagaimana menaruh video youtube di postingan pada blog kita agar tampilannya Responsive dan SEO friendly serta Valid HTML5 disini kita akan menambahkan sedikit kode dan modifikasi agar tampilannya Responsive dan SEO Friendly kita akan modifikasi pada link yaitu pada tampilannya. Bagi Sobat yang mau mencobanya mari kita bahas bersama.

Langkah Pertama

Silahkan sobat gunakan kode CSS dibawah ini yang nantinya agar tampilannya tetap sama namun bisa Responsive.

.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;
}

Perhatikan kode yang ditandai padding-bottom: 56.25% di kode .video-responsive untuk penjelasan lebih detilnya silahkan sobat lihat DISINI. Lalu untuk menampilkan video pada postingan silahkan pakai kode HTML dibawah ini.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/vyT-oGDnMqE"></div>
    </div>
    </div>

Untuk embed URL videonya silahkan sobat sesuaikan dengan yang ingin ditampilkan nantinya.


Langkah Ke Dua
Silahkan sobat salin kode Javascript iframe youtube dibawah ini lalu letakkan diatas kode </body>

<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);
//]]>
</script>

Setelah itu agar video berjalan sesuai dengan yang diharapkan jangan lupa untuk memasang jquery library di Blog sobat bebas menggunakan versi berapapun bagi yang belum memasangnya berikut kode jquery library-nya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

RESULT

DEMO

Dan Selesai, untuk melihat hasilnya seperti DEMO diatas selamat mencoba.