Cara Memasang Video Youtube yang Responsive di Blog

Sebagai seorang Blogger dan Youtuber, tentunya kita sering donk membuat artikel blog yang di dalamnya juga berisi video dari akun youtube kita yang membahas konten atau tema yang relevan dengan artikel yang kita buat, itung-itung selain membuat artikel di blog, kita juga bisa membuat video dengan tema yang sama dengan artikel yang kita buat, semisal nih jika kita membuat artikel blog tentang tutorial, maka akan lebih lengkap rasanya jika kita juga membuatkan videonya, agar semakin jelas dan mudah dimengerti oleh pengunjung blog kita. Seperti pada beberapa artikel yang saya buat, saya juga menyertakan video di dalamnya, ya meskipun tidak semua artikel sih. Untuk menyematkan atau memasukkan video youtube ke dalam artikel blog kita sebenarnya sangat mudah sekali, blogger sendiri sudah menyediakan fitur "Insert a video" pada editor postingan blogger. Hanya dengan klik icon bergambar "take film atau insert a video" akan muncul jendela baru "Add a video" kita tinggal pilih "From Youtube" dan mengisi link pada kolom tersebut dengan link video youtube kita. Namun ternyata ada sedikit kendala setelah video youtube tersebut ditampilkan pada halaman artikel blog, tampilan videonya jadi terlihat kecil dan ukuran framenya tidak menyesuaikan dengan lebar halaman artikel blog kita, sebenarnya tidak ada masalah pada saat kita memutar videonya, namun rasanya agak kurang enak dilihat aja, soalnya mungil banget frame nya hehe. Kita bisa saja mengedit ukuran lebar dan panjang frame video youtube tersebut secara manual yaitu dengan cara memilih HTML pada editor postingan blogger, lalu kita cari kode yang didalamnya terdapat link URL video youtube kita, kita ganti ukuran width dan height nya sampai pas dengan lebar halaman artikel blog kita. Ternyata cara manual untuk mengedit ukuran frame video youtube tersebut tidak berjalan mulus jika artikel blog kita di buka dari smartphone atau mobile gadget, frame yang tadinya sudah kita atur sedemikian rupa saat ditampilkan di blog lewat browser PC, ternyata akan terlihat terpotong pada versi mobile (tidak nampak utuh tampilan thumbnail videonya). Padahal template blog kita kan udah responsive, kenapa videonya gak ikut responsive juga ya?

how to make youtube video responsive on blog

Nah inilah salah satu kekurangan dari editor postingan blogger karena belum memiliki fitur menampilkan video Youtube yang responsive. Tapi sobat tenang saja, ternyata ada caranya lho agar video youtube di dalam artikel blog kita bisa tampil responsive saat dibuka di semua perangkat apapun. Yuk ikuti langkah-langkah mudahnya.

1. Buka akun Blogger sobat, pilih menu Template, klik Edit HTML. Ketikkan CTRL+F pada keyboard sobat untuk mencari kode ]]></b:skin> atau </style> pada kolom pencarian. Lalu letakkan kode CSS di bawah ini tepat diatas ]]></b:skin> atau </style>

/* Video 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}

2, Kemudian letakkan kode Javascript loader Youtube Video di bawah ini tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Video 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>

3. Jika blog sobat belum dilengkapi dengan Jquery Library versi berapapun, sobat bisa tambahkan kode ini tepat diatas kode <head>

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

4. Terakhir, simpan template sobat

Apakah hanya itu saja? Berarti kita tinggal kasih link video youtube kita aja donk di editor postingan artikel lewat "Insert a video"? Owh tidak, belum selesai langkah-langkahnya. Kita tidak akan menggunakan fitur "Insert a video" yang ada pada editor postingan blogger, melainkan kita harus membungkus link embeded video youtube kita tersebut dengan kode HTML yang berbeda. Copy kode di bawah ini ke dalam editor postingan artikel sobat, pilih yang HTML yah.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="TARUH-LINK-EMBED-VIDEO-YOUTUBE-SOBAT-DISINI">
</div>
</div>
</div>

Lalu bagaimana cara mengambil link embed video youtube saya? Sobat tinggal buka video youtube sobat yang akan diambil link embednya, lalu klik kanan pada tampilan video youtube sobat, kemudian pilih "Salin Kode semat/ Copy Embed Video"

Maka penampakan link embed video kita akan seperti ini jika di pastekan:

<iframe width="854" height="480" src="https://www.youtube.com/embed/ikk4GZwGix4" frameborder="0" allowfullscreen></iframe&gt

Ambil kode link embed video youtube sobat yang saya beri warna orange. lainnya hapus saja. Lalu jika sudah dimasukkan pada kode HTML pembungkus, penampakannya akan seperti di bawah ini:

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

Langkah terakhir tinggal publish artikel sobat, untuk melihat penampakannya, jangan lupa untuk melakukan pengecekan juga pada smartphone sobat, apakah sudah responsive atau belum.

Sebenarnya ada cara lain yang lebih mudah, cara yang kedua yaitu hanya dengan memasang kode CSS Youtube Video Responsive pada HTML template sobat, sobat tidak perlu membungkus lagi video sobat pada editor postingan, tinggal menggunakan fitur dari blogger "Insert a video" seperti biasa, maka dengan sendirinya tampilan frame youtube sobat akan responsive, baik dibuka melalui PC maupun Mobile/ smartphone. Namun setelah saya coba sendiri cara ini, ternyata memiliki kelemahan. Apa itu kelemahannya? Tampilan iklan adsense saya terpotong setengahnya, jika artikel blog saya di buka lewat versi mobile. Ntah, saya juga bingung mengapa bisa demikian, kok bisa kode CSS youtube responsive nya bisa mempengaruhi tampilan iklan adsense? Akhirnya saya pake cara pertama saja, dan hasilnya normal, iklan adsense bisa tampil secara keseluruhan, dan video youtube saya juga jadi responsive. Tapi mungkin ini hanya terjadi di template blog saya, sedangkan di template yang lain mungkin tidak ada masalah dengan cara kedua ini, saya sendiri masih mencari tahu apa penyebabnya. Namun bagi sobat yang ingin mencoba cara kedua juga tidak masalah, saya akan berikan kode CSS nya, letakkan kode CSS di bawah ini tepat diatas ]]></b:skin> atau </style> ya sob.

/* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}

Simpan Template sobat. Di bawah ini merupakan demo dari tampilan video Youtube responsive yang sudah diterapkan di blog ini:

Dan, ini tampilannya jika dilihat dari smartphone android saya:

Demikian langkah-langkahnya untuk menjadikan video youtube yang kita sematkan di artikel blog menjadi responsive. Tutorial tersebut saya dapatkan dari blognya mbak Arlina. Jika sobat memiliki kendala seputar pemasangan kode diatas, bisa tanyakan pada kolom komentar di bawah artikel ini. Terima kasih sudah mampir. Jangan lupa untuk subscribe blog ini yah. Sampai jumpa di artikel lainnya.

UPDATE:
Beberapa waktu lalu ada komentar dari bro Youtube Responsive Generator yang memberitahukan bahwa ada cara terbaru untuk membuat video Youtube menjadi responsive saat di posting di artikel blog, cara tersebut menggunakan sebuah tools yang menggenerate/ merubah link video youtube menjadi susunan kode HTML. Saya rasa cara dengan menggunakan tools ini lebih praktis, namun beberapa kodenya perlu dimodifikasi sedikit. Untuk mencobanya, sobat bisa langsung menuju ke Youtube Responsive Generator.

Setelah sobat membuka linknya, maka akan tampak sebuah tools seperti pada gambar diatas, ikuti langkah seperti yang tertulis pada gambar, perlu sobat ketahui bahwa link video youtube yang di copas di tools tersebut bukanlah link kode "Embed/ semat" melainkan link URL yang tampak pada kolom URL browser sobat, contohnya seperti ini: https://www.youtube.com/watch?v=HPh-rfFwkQM. Setelah sobat klik "Convert", maka akan muncul beberapa deretan kode HTML seperti di bawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0B2wMkffXAnWJVEtmRE1pU005Wnc'></script>
<div class="separator" style="clear: both; text-align: center;">
<div class="videoyoutube">
<div class="video-responsive">
    <div class="video-youtube loader" data-src="https://www.youtube.com/embed/HPh-rfFwkQM">
</div>
<center><div style="font-size: 0.8em;"><a href="http://bloggerkan.blogspot.com/2016/04/easy-steps-make-youtube-video-responsive.html" title="YouTube embed youtube embed responsive code generator"> <div class="loader-view"></div></a></div></center>
</div>
</div>
</div>

Hapus kode yang saya tandai dengan warna orange jika di dalam template blog sobat sudah ada plugin JQuery. Jika plugin JQuery belum terinstal di blog sobat, maka sertakan kode yang saya tandai dengan warna orange. Copy kode hasil convert dari tools tersebut ke editor HTML postingan blog sobat, dan coba lihat hasilnya.