Koding, Tips dan trik
Feb26

Trik video responsive menggunakan CSS

Ktzagcplugin free agcplugin
Iklan

Trik video responsive menggunakan CSS

responsive video css

Jika anda adalah seorang designer web atau designer themes, tentu tidak asing dengan namanya iframe, object atau embed. Ya kode itu kebanyakan untuk menampilkan sebuah video. Video cukup sulit dibuat responsive, jika menggunakan HTML5 tentu cukup mudah dibuat responsive, cukup menggunakan max-width:100% saja. Contoh kode:

video {
	max-width: 100%;
	height: auto;
}

Lalu bagaimana dengan kode iframe, object dan embed, semisal embed code dari youtube, vimeo, dailymotion dan lainnya. Anda bisa menggunakan trik khusus misal penggunaan position relative dan absolute. Oke langsung saja berikut adalah kode CSS nya:

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Lalu masukkan contoh kode HTML sebagai berikut:

<div class="video">
	<iframe width="560" height="315" src="//www.youtube.com/embed/Zky1fhJ2BhM" frameborder="0" allowfullscreen></iframe>
</div>

Yups… seperti contoh diatas setelah memasukkan CSS di style nya lalu anda cukup menambahkan kode <div class=”video”>kode video</div>

Cukup mudah bukan untuk contohnya silahkan saja langsung lihat di: http://labs3.kentooz.com/tuberuk/facebook-video-embed-just-testing-post/

Kalau masih ingin bertanya silahkan. :D

Tags:
Iklan
Rate this article!

Author: 

Freelance designer, tidak terpaku sama yang namanya waktu, hobby mengunjungi localhost setelah itu baru OL. Suka pusing kalau melihat kode kode yang aneh. :| Jangan lupa add ane di link social newtwork dibawah.

author

Related Posts "Trik video responsive menggunakan CSS"

2 Responses

  1. author

    ali1 year ago

    apkah itu berlaku untuk gambar jugaa?

    Reply
    • author
      Author

      admin1 year ago

      Tidak, kalau gambar lebih mudah malah tinggal pakai % saja daripada px.

      Reply

Leave a reply "Trik video responsive menggunakan CSS"

Captcha: * Time limit is exhausted. Please reload CAPTCHA.