Cara Membuat Video Youtube Tampil Responsive Mobile Friendly

Untuk para pengguna suatu website khususnya pemegang platform blogger disini saya akan mengulas trik agar video youtube bisa tampil responsive di blog karena sekarang sudah zamannya pengguna android smartphone jadi fitur blog juga harus mengikuti perkembangan ini, Video youtube dengan embed aslinya tidak tampil responsive jika kita langsung memasangnya pada web kita karena pihak youtube masih default dan harus dimodifikasi sendiri agar bisa valid HTML5 dan mobile friendly.

Dengan di modifikasi video youtube kita akan tampil responsive mengikuti layar hape yang akan anda gunakan hal ini juga termasuk salah satu blog anda terlihat seo friendly karena memudahkan pengunjung mendapatkan informasi yang akurat dan nyaman. Bayangkan saja bila mereka melihat video melalui hape android namun ukuran tidak memadai hal ini tentu akan membuat para pengunjung tidak betah di blog kamu.

Nah untuk itu sobat harus setting ulang template blog anda dengan menambahkan sedikit CSS untuk menjadikan tampilan youtube mobile friendly agar seo friendly juga tentunya ya gays. Oke langsung saja ketutorial berikut ini :

Cara jitu video youtube tampil responsive di blog :

Tahap awal : Agar tampilannya tetap sama namun menjadi responsive, silahkan gunakan kode CSS di bawah ini:

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

Tahap Kedua : Untuk kode padding-bottom:56.25% pada CSS .video-responsive silahkan simak penjelasannya dari sumbernya pada link di bawah postingan ini. Kemudian silahkan gunakan kode HTML di bawah ini untuk memunculkan videonya di postingan:

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

Tahap Ketiga : Silahkan ganti URL embed videonya dengan URL embed video yang Anda ingin tampilkan.

Kemudian simpan kode javascript iframe loader video Youtube di bawah ini DI ATAS 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>

Dan jangan lupa blog Anda sudah dilengkapi dengan jquery library seperti di bawah ini (berapa pun versinya)

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

Tahap Empat : Selesai....

Nah untuk pengambilan video script URL Embed ini sobat bisa melihat gambar .gif berikut ini :

 Itulah Cara Baru Memasang Video Youtube Responsive pada Postingan Blog Kita semoga bisa bermanfaat.