Modifikasi Video Youtube Jadi Responsive Valid HTML dan SEO

Modifikasi Video Youtube Jadi Responsive Valid HTML dan SEO

Seiring perkembangan jaman, semua orang di dunia jadi kecanduan dengan sesuatu yang bersifat responsive. Alasannya beragam mulai dari karena selera atau karena enak dipandang. Nah kali ini saya akan share tutorial mengenai Modifikasi Video Youtube Jadi Responsive Valid HTML dan SEO judul yang agak panjang bukan? Hehe...

Modifikasi yang saya maksudkan kali ini adalah bertujuan untuk

1. Membuat tampilan video tersebut responsive ( Menyesuaikan ukuran layar )
2. Valid HTML
3. Membuatnya SEO Friendly

PEMBAHASAN!
 Kenapa dengan memodifikasinya  bisa membuat video itu SEO Friendly dan Valid HTML ? Perhatikan kode berikut

<iframe width="560" height="315" src="//www.youtube.com/embed/3DSldkw35n4" frameborder="0" allowfullscreen></iframe>

Seperti yang anda ketahui bahwa kode iframe akan berdampak pada SEO Score dan kode frameborder="0" allowfullscreen adalah penyebab error saat validasi HTML

Ketika Anda klik tombol embed video di Youtube, silahkan gunakan kode embed lama Youtube dengan memberi tanda centang pada "Use old embed code".

Dan kodenya akan seperti di bawah ini.

<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/3DSldkw35n4?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/3DSldkw35n4?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Perhatikan kode yang berwarna merah, silahkan hapus kode tersebut dan kode yang berwarna biru ganti dengan tanda (/), sehingga penampakannya akan seperti di bawah ini.

<embed src="http://www.youtube.com/v/3DSldkw35n4" width="560" height="315"/>

Nah untuk pemanggilan dan mempercantiknya kita akan menambahkan sedikit kode css dan sedikit javascript

Copy CSS berikut

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

Salin kode dibawah ini 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>

Masukkan kode ini untuk pemanggilannya :D

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

Selamat mencoba! BONUS!!!

Tweet