Cara Memasang Video Youtube Yang Responsive – Penggunaan video dalam sebuah artikel blog pada saat ini semakin banyak digunakan, sejak YouTube meluncurkan fitur embed video.

Fitur ini memungkinkan kalian untuk menayangkan video YouTube secara langsung di blog / web kalian.

Dan enambahkan sebuah video youtube di blog pada saat ini memang sudah menjadi hal yang lumrah di lakukan oleh berbagai blogger, baik itu video dari saluran youtube mereka sendiri ataupundari video orang lain.

Karena selain mengembed video youtube di blog itu legal atau diperbolehkan oleh Google, karena dengan memanfaatkan fitur embed video youtube, sebagai seorang blogger tentunya kalian juga akan mendapatkan banyak keuntungan, salah satunya yaitu kalian dapat membuat blog lebih keren dan artikel yang kalian buat akan lebih bernilai.

Namun, embed video tidak bisa asal dipasang begitu saja. Karena video embed dari yotube itu tidak responsive. Akan ada sedikit masalah yang berkaitan dengan tampilan konten pada template-template responsive blogger, yaitu yang berkaitan dengan konten video yang berasal dari youtube.

Apabila kalian berusaha untuk embed atau menyematkan/memasang sebuah video dari youtube menggunakan kode semat bawaan atau default ke blogger maka tampilan videonya tidak akan responsive alias tidak akan mengikuti template alhasil akan berantakan, dan ini akan menggangu fungsi dan khasiat template responsive yang telah kalian gunakan, selain juga kode semat bawaan youtube itu tidaklah SEO friendly.

Yang menjadi penyebab kenapa kode embed bawaan youtube itu tidak seo sebab kode yang digunakan adalah kode tag html iframe, lalu sedangkan di beberapa web yang membahas tentang SEO menyatakan bahwa kode iframe itu sangat buruk untuk blog atau web dalam hal SEO.

Maka dengan begitu solusinya yaitu dengan kalian mengubahnya saja tag iframenya menjadi tag object. Lalu bagaimana agar code embed video youtube jadi SEO? Berikut ini adalah langkah-langkahnya :

  • Kode bawaan youtube yang akan di-embed ke web yaitu seperti berikut ini:

<iframe width=”640″ height=”360″ src=”https://www.youtube.com/embed/7pj_2f0Aq1w” frameborder=”0″ allowfullscreen></iframe>

Kode tersebut menggunakan tag iframe, dan selanjutnya yaitu kode SEO friendly dengan tag object

  • Kode dengan menggunakan tag object atau SEO friendly

<object data=”//www.youtube.com/embed/7pj_2f0Aq1w” frameborder=”0″ allowfullscreen></object>

  • Maka dengan demikian gunakan kode pada nomor dua agar kalian bisa mendapatkan konten video yang SEO friendly.

Dan berikut ini adalah cara memasang video youtube yang responsive :

1). Langkah yang pertama yaitu kalian buka video youtube yang ingin kalian tambahkan di situs website atau blog, lalu kemudian ambil kode embednya. Apabila kalian belum mengetahui bagaimana cara mengambil kode embed video youtube, Kalian dapat membukanya di tutorial ambil dan pasang kode embed youtube.

Contoh kode embed youtube yaitu :

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/EO4TYdflt3k?showinfo=0″ frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

Setelah kalian sudah mempunyai kode embed, maka copy dan paste terlebih dahulu di notepad.

2). Lalu langkah yang kedua yaitu silahkan kalian Akses akun blogger kalian. Dan pada dashboard Blogger, kalian pilih Tamplate (Tema) >>> Edit HTML

Dan cari kode “]]></b:skin>” atau “</style>”, untuk lebih cepat silahkan saja kalian tekan tombol CTRL+F pada keyboard PC yang kalian gunakan. Lalu kemudian pastekan atau tempel kode berikut di atasnya tersebut.

/* Youtube Responsive */

videoyoutube{text-align:center;margin:auto;width:100%;}

video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}

video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

3). Kemudian langkah yang ketiga yaitu copy pastekan script di bawah ini sebelum di </body>

<script type=’text/javascript’>

//<![CDATA[

// Youtube Responsive

setTimeout(function(){$(“.video-youtube”).each(function(){$(this).replaceWith(‘<iframe class=”video-youtube loader” src=”‘+$(this).data(“src”)+'” allowfullscreen=”allowfullscreen” height=”281″ width=”500″></iframe>’)})},5e3);

//]]>

</script>

Sebagai catatan :

Untuk merubah ukuran agar sesuai dengan selera kalian, maka silakan rubah angka “281” dan “500” dengan angka yang kalian inginkan.

4). Dan selanjutnya langkah yang ke empat, kalian Klik simpan template. Dan selesai.

Apakah dengan menggunakan cara ini setiap kali kalian ingin menambahkan video dari youtube ke blog, video tersebut menjadi responsive dan mampu menyesuaikan lebar alat yang mengaksesnya? Jawabannya yaitu tentu saja tidak. Apabila kalian tidak melakukan embed yang benar, maka dari itu  jika kalian ingin videonya responsive. Setiap kali akan memposting artikel dan menambahkan video embed dari YouTube maka silahkan kalian gunakan kode di bawah ini :

<div class=”videoyoutube”>

<div class=”video-responsive”>

<div class=”video-youtube loader” data-src=”SIMPAN-LINK-EMBED-VIDEO-YOUTUBE-DI-SINI”>

</div>

</div>

</div>

Maka dengan menambahkan kode css tersebut, tampilan embed video youtube pada artikel yang kalian miliki akan menjadi lebih rapih. Responsive yaitu merupakan suatu elemen penting dalam sebuah web desain. Bahkan responsibilitas itu merupakan salah satu penilaian google yang sangat penting dalam menentukan page rank. Nah, itulah cara-cara dalam memasang video youtube agar dapat responsive. Semoga bermanfaat bagi kalian yang ingin mencobanya.

Leave a Reply

Your email address will not be published. Required fields are marked *