Cara Pasang Video Youtube Full Responsive di Blog

Cara Pasang Video Youtube Full Responsive di Blog - Pastinya temen-temen pernah dapatkan blog yang di dalamnya terdapat video youtube. Tidak sedikit blogger menyematkan video youtube pada artikel blognya, yang bertujuan memperjelas apa yang disampaikan penulis dalam bentuk video. Tidak hanya itu saja, kombinasi artikel dengan video yang relevan juga menjadikan blog lebih keren dan professional.


Untuk menyematkan atau memasang video youtube ke dalam artikel blog sebenarnya sangat mudah. Blogger sudah menyediakan fasilitas insert video. Caranya sebagai berikut:
1. Klik icon "insert a video" pada menu editor

2. Pilih opsi insert video,anda bisa pilih video dari youtube langsung atau video yang anda upload di youtube.

Namun ternyata ada sedikit kendala apabila video youtube disematkan pada artikel blog dengan cara tersebut, video akan terlihat kecil dan framenya tidak menyesuaikan dengan lebar halaman artikel. Sebenarnya tidak ada msalah ketika video diputar, tetapi kelihatanya tidak enak dan tidak responsive soalnya frame video terlalu kecil. Kita bisa saja mengedit panjang dan lebar frame video tersebut secara manual di bagian html artikel. Kita bisa atur ulang ukuran panjang dan lebar sesuai pas dengan halaman artikel. Tetapi cara manual tersebut tidak akan berjalan mulus apabila video tersebut diakses di smartphone atau hp. Ukuran frame yang sudah kita atur tadi ternyata tidak berfungsi di smartphone atau hp, thumbnail video akan terpotong dan tidak tampil utuh.

walaupun template yang digunakan sudah mobile responsive, tapi untuk video youtube tetap responsive. Nah inilah kekurangan platform Blogger, belum menyediakan fitur video responsive youtube, berbeda dengan Wordpress.

Tapi sobat tidak perlu khawatir, di sini saya akan berbagi cara pasang video youtube full responsive di postingan blog. Ada beberapa cara untuk buat video youtube responsive, saya akan berikan dua cara pasang video youtubefull responsive di blog. Silahan perhatikan langkh langkah berikut:

Cara Pasang Video Youtube Full Responsive di Blog

Langkah Pertama
Buka Blogger, pilih Tema kemudian pilih Edit HTML. Tekan ctrl + F, tulis pada kolom pencarian  ]]></b:skin> atau </style>, lalu letakan script berikut tepat di atas ]]></b:skin> atau </style>

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

Langkah Kedua
Kemudian letakan kode javascript loader video youtube di bawah ini tepat di atas </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);
//]]>

Langkah Ketiga
Apabila blog sobat belum dilengkapi JQuery versi berapapun, sobat bisa tambahkan kode JQuery tepat di atas </head>

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

Langkah Keempat
Simpan template sobat

Langkah Kelima
Selanjutnya untuk menyematkan video pada postingan, gunakan kode di bawah ini

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>

Contoh link embed video yang diambil

Salin link embed video seperti di atas kemudian simpan di dalam HTML postingan seperti di bawah ini

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

Langkah Keenam
Terakhir simapan/publikasikan

Untuk cara yang kedua lebih mudah, sobat tinggal pasang kode CSS di HTML template. Sobat tidak perlu lagi membungkus link video youtube pada editor HTML postingan, tinggal menggunakan fitur "insert a video" dari Blogger seperti biasa. Maka secara otomatis tampilan frame video youtube sobat akan responsive ketika diakses di PC atau mobile/smartphone.

Namun cara yang kedua ini memiliki kelemahan, tampilan iklan adsense akan terganggu. Tampilan iklan adsense yang bersebelahan dengan video akan terpotong dan tidak tampil full. Tapi tidak masalah bagi sobat yang ingin coba cara kedua ini silahkan ikuti cara berikut:

Simpan kode CSS berikut tepat di atas ]]></b:skin> atau </style>

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

Atur kembali CSS max-height pada media query jika belum sesuai

Demikian langkah-langkah memasang video youtube full responsive di blog. Mudah bukan, kini video yang disematkan pada postingan akan responsive yang artinya ukuran frame video akan menyesuaikan lebar halaman postingan, ketika diakses di desktop atau smartphone/mobile.

Share this post