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 menandakan kesuksesannya.

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

Langkah Pertama

Silahkan sahabat gunakan isyarat CSS dibawah ini yang nantinya semoga tampilannya tetap sama namun mampu 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 isyarat yang ditandai padding-bottom: 56.25% di isyarat .video-responsive untuk penjelasan lebih detilnya silahkan sahabat lihat DISINI. Lalu untuk menampilkan video pada postingan silahkan pakai isyarat 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 sahabat sesuaikan dengan yang ingin ditampilkan nantinya.


Langkah Ke Dua
Silahkan sahabat salin isyarat Javascript iframe youtube dibawah ini lalu letakkan diatas isyarat </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 semoga video berjalan sesuai dengan yang diperlukan jangan lupa untuk memasang jquery library di Blog sahabat bebas menggunakan versi berapapun bagi yang belum memasangnya berikut isyarat 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 akibatnya menyerupai DEMO diatas selamat mencoba.