Cara Mudah Menciptakan Video Responsive Di Blog

Barangkali ada yang bertanya bagaimana cara menciptakan dan pasang video menjadi responsive di blog.

Kebetulan aku gres saja menciptakan blog gres yang memposting video-video apabila isi artikelnya mengarah dan mendukung ke video yang ada di youtube.

Masalahnya dikala meng-embed video dari youtube pribadi melalui "Insert a Video" pada bab sajian posting blog, niscaya nggak responsive. Malah ukurannya kecil nggak karuan.

Saya kutip nih pribadi dari Arlinadzgn, sekaligus untuk mendokumentasikan semoga nggak balik lagi blog Arlina.

Cara Mudah Membuat Video Responsive di Blog

1. Login to Blogger
2. Template > Edit HTML
3. Cari aba-aba </b:skin> atau </style>
4. Copy (salin) aba-aba dibawah ini:

.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}

5. Paste (tempel) diatas salah satu aba-aba yang barusan kita cari tersebut
6. Selanjutnya letakkan aba-aba dibawah ini, diatas aba-aba </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>

Save perubahan pada blogger template. Ok hingga disini sudah selesai. Sekarang cara pasangnya bagaimana?

Kronologisnya artikel sudah dibuat, dan ingin ditambahkan video yang bakal menjadi responsive di blog. Gunakan aba-aba dibawah ini pada gaya penulisan HTML (bukan Compose):

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="disini link embed video youtube">
</div>
</div>
</div>

Untuk cara pengisian link embed yang akan disisipkan, diawali dengan aba-aba garis miring ke kanan. Contoh:

//www.youtube.com/embed/29sfdf83

Pastikan link embed tersebut bukan kependekan menyerupai "youtu.be" atau kependekan lainnya. Saya sudah mencobanya, gagal! Makara harus sesuai dengan link embed diatas. Ok semoga berguna.*