Rabu, 08 Juni 2016

Membuat embed video diblog responsive


Agar Video Responsive

Mengembed atau menyematkan video dipostingan kini sudah menjadi kebutuhan untuk sebagian orang yang mempunyai blog dengan niche multimedia karena dengan video maka pembaca akan lebih mudah mempraktikan apa yang kita jelaskan.

Bagi sebagian orang mungkin menyematkan video dipostingan tinggal copas alias copy paste aja, tapi tidak untuk jaman sekarang ini, karena sekarang jamannya orang mengakses blog atau website menggunakan Smartphone yang berarti mempunyai layar ukuran kecil, dan selain blog harus responsive dijaman sekarang foto dan video juga harus responsive biar pengguna lebih nyaman dalam mengakses web / blog kita.

Untuk anda yang mau menyematkan video dengan cara copas dan langsung responsive anda bisa langsung kunjungi websitenya disini Resposive Embed Jadi anda tinggal masukan URL video lalu klik Tombol Embed dan anda akan siap dengan kodenya.

Tapi kalau bagi saya kalau copas kode seperti itu malah bikin banyak kode, karena disetiap postingan anda copas kode tersebut. Kalau saya agar lebih efektif, saya menyimpan kode cssnya didalam template saya.

.embed-container{position:relative;width:100%;padding-bottom:56.3%;margin-bottom:40px}
.embed-container iframe,embed,object{position:absolute;top:0;bottom:0;left:0;right:0;border:none;width:100%;height:100%}

Lalu setiap posting video saya hanya perlu menambahkan kode <div class="embed-container"> sebelum kode <iframe> Jadi seperti ini kodenya.

<div class="embed-container">
<iframe frameborder="0" src="urlvideo"></iframe>
</div>

Jadi yang perlu saya copy hanya kode htmlnya saja, dan video akan siap disajikan pada tampilan PC maupun Smartphone.

Contoh
Silahkan perbesar dan perkecil browser anda, dan lihat videonya menyseuaikan atau tidak sesuai dengan window browser anda.