Kebetulan saya baru saja membuat blog baru yang memposting video-video apabila isi artikelnya mengarah dan mendukung ke video yang ada di youtube.
Masalahnya ketika meng-embed video dari youtube langsung melalui "Insert a Video" pada bagian menu posting blog, pasti nggak responsive. Malah ukurannya kecil nggak karuan.
Saya kutip nih langsung dari Arlinadzgn, sekaligus untuk mendokumentasikan biar nggak balik lagi blog Arlina.
Cara Praktis Membuat Video Responsive di Blog
1. Login to Blogger
2. Template > Edit HTML
3. Cari kode </b:skin> atau </style>
4. Copy (salin) kode 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;}
.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 kode yang barusan kita cari tersebut
6. Selanjutnya letakkan kode dibawah ini, diatas kode </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>
//<![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 sampai disini sudah selesai. Sekarang cara pasangnya bagaimana?
Kronologisnya artikel sudah dibuat, dan ingin ditambahkan video yang bakal menjadi responsive di blog. Gunakan kode dibawah ini pada gaya penulisan HTML (
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="disini link embed video youtube">
</div>
</div>
</div>
<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 kode garis miring ke kanan. Contoh:
//www.youtube.com/embed/29sfdf83
Pastikan link embed tersebut bukan singkatan seperti "youtu.be" atau singkatan lainnya. Saya sudah mencobanya, gagal! Jadi harus sesuai dengan link embed diatas. Ok semoga berguna.*
Post A Comment:
0 comments so far,add yours
Posting Komentar