Seperti kita ketahui bersama bahwa sekarang blog sedang memasuki zaman responsive style berkat adanya perangkat mobile yang menjamur di pasaran. Alhasil hal tersebut berpengaruh terhadap tampilan web/blog agar sesuai dengan resolusi layar perangkat mobile. Inilah yang menjadi alasan para blogger beralih ke tampilan blog yang responsive.
Tutorial Cara Membuat Video Menjadi Responsive di Blog ini sangat sesuai dengan tampilan blog responsive. Sehingga video akan menyesuaikan layar pada gadget yang digunakan.
Caranya:
- Log in ke blogger.com
- Pilih Template, kemudian edit HTML
- Cari kode </body>, dengan cara Ctrl+F
- Masukan kode di bawah ini tepat di atasnya.
<script type='text/javascript'>
//<![CDATA[
(function ( window, document, undefined ) {
/*
* Grab all iframes on the page or return
*/
var iframes = document.getElementsByTagName( 'iframe' );
/*
* Loop through the iframes array
*/
for ( var i = 0; i < iframes.length; i++ ) {
var iframe = iframes[i],
/*
* RegExp, extend this if you need more players
*/
players = /www.youtube.com|player.vimeo.com/;
/*
* If the RegExp pattern exists within the current iframe
*/
if ( iframe.src.search( players ) > 0 ) {
/*
* Calculate the video ratio based on the iframe's w/h dimensions
*/
var videoRatio = ( iframe.height / iframe.width ) * 100;
/*
* Replace the iframe's dimensions and position
* the iframe absolute, this is the trick to emulate
* the video ratio
*/
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.width = '100%';
iframe.height = '100%';
/*
* Wrap the iframe in a new <div> which uses a
* dynamically fetched padding-top property based
* on the video's w/h dimensions
*/
var wrap = document.createElement( 'div' );
wrap.className = 'fluid-vids';
wrap.style.width = '100%';
wrap.style.position = 'relative';
wrap.style.paddingTop = videoRatio + '%';
/*
* Add the iframe inside our newly created <div>
*/
var iframeParent = iframe.parentNode;
iframeParent.insertBefore( wrap, iframe );
wrap.appendChild( iframe );
}
}
})( window, document );
//]]>
</script>
5. Simpan
NB: Hanya support untuk video Youtube dan Vimeo
Diposkan oleh DDW
Saya adalah orang biasa yang mencoba menjadi luar biasa. Ngeblog karena hobi dan ingin jadi Guru sekaligus penulis. Aamiin Insya Alloh.
0 comments:
Post a Comment