Komentar: Ketika saya mengkodekan tema Elemin (situs responsif yang saya rancang baru -baru ini), salah satu lompatan bingkai yang saya temui adalah cara membuat video tertanam lebih fleksibel dalam perubahan ukuran; Melalui jam mencari data dan eksperimen, saya akhirnya menemukan solusi
Ketika saya mengkodekan tema Elemin (situs responsif yang saya rancang baru -baru ini), salah satu lompatan bingkai yang saya temui adalah cara membuat video tertanam lebih fleksibel dalam perubahan ukuran. Menggunakan Max-Width: 100% dan Tinggi: Otomatis dapat membuat tag video HTML5 berfungsi dengan baik, tetapi solusi ini tidak berfungsi dengan kode inline untuk iframe atau tag objek. Setelah beberapa jam mencari data dan eksperimen, saya akhirnya menemukan solusi. Teknik CSS ini berguna saat Anda melakukan desain responsif.
Tag video html5 fleksibel
Menggunakan video HTML5, Anda dapat membuatnya fleksibel dengan mengatur Max-Width: 100%. Dalam pengantar sebelumnya, telah disebutkan bahwa itu tidak berlaku untuk iframe yang umum digunakan dan kode tertanam pada objek.
Video {
Max-Width: 100%;
Tinggi: otomatis;
}
Objek Fleksibel & Video Tertanam IfRame
Trik ini cukup sederhana, Anda perlu menambahkan wadah <div> ke video dan mengatur nilai properti padding-bottom dari Div antara 50% dan 60%. Kemudian atur lebar dan tinggi elemen anak (ifame atau objek) hingga 100%, dan gunakan penentuan posisi absolut. Ini memaksa objek tertanam untuk secara otomatis berkembang secara maksimal.
CSS
.video-container {
Posisi: kerabat;
padding-bottom: 56,25%;
Padding-top: 30px;
Tinggi: 0;
meluap: tersembunyi;
}
.video-container iframe,
objek .video-container,
.video-container embed {
Posisi: Absolute;
TOP: 0;
Kiri: 0;
Lebar: 100%;
Tinggi: 100%;
}
Html
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" frameborder = "0"> </iframe>
</div>
Mencapai fleksibilitas pada lebar tetap
Jika lebar video terbatas, maka kita memerlukan wadah <viv> tambahan untuk membungkus video dan menetapkan lebar tetap dan lebar maksimum: 100% untuk div.
CSS
.video-wrapper {
Lebar: 600px;
Max-Width: 100%;
}
Html
<div>
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" frameborder = "0"> </iframe>
</div>
<!- /video->
</div>
<!- /video-wrapper->
kesesuaian
Trik ini mendukung semua browser, termasuk: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone dan iPad.