Menggunakan CSS untuk melaksanakan kemahiran tutorial html5 kes video elastik_html5

Semasa saya mengekodkan Elemin Theme (tapak responsif yang saya reka baru-baru ini), langkau bingkai yang saya temui ialah cara menjadikan video terbenam lebih fleksibel dalam perubahan saiz. Menggunakan max-width:100% dan height:auto boleh menjadikan teg video HTML5 berfungsi dengan baik, tetapi penyelesaian ini tidak berfungsi untuk kod sebaris teg iframe atau objek. Selepas berjam-jam mencari dan mencuba, akhirnya saya menemui penyelesaiannya. Helah css ini berguna apabila anda melakukan reka bentuk responsif.

Teg video html5 yang fleksibel
Menggunakan video html5, anda boleh menjadikannya fleksibel dengan menetapkan lebar maksimum:100%. Dalam pengenalan sebelumnya, telah disebutkan bahawa ia tidak sesuai untuk kod terbenam dalam iframe dan objek yang biasa digunakan.

Salin kod

Kod adalah seperti berikut:

video {
maks -lebar: 100%;
tinggi: auto;
}

Video Terbenam Objek Fleksibel & Iframe
Helah ini agak mudah, anda perlu tambahkan A

dan tetapkan nilai atribut padding-bottom div antara 50% dan 60%. Kemudian tetapkan lebar dan ketinggian elemen anak (ifame atau objek) kepada 100%, dan gunakan kedudukan mutlak. Ini akan memaksa objek terbenam untuk mengembang secara automatik ke saiz maksimumnya.
CSS

Salin kod

Kodnya adalah seperti berikut:

.bekas video {
kedudukan: relatif;
padding-bawah:
padding-top: 30px; 🎜>}
.iframe bekas video,
.objek bekas video,
.benam bekas video {
kedudukan: mutlak;
atas: 0; ;
lebar: 100%;
tinggi: 100%; 🎜>
Salin kod


Kod adalah seperti berikut:

🎜>

Fleksibiliti di bawah lebar tetap

Jika lebar video adalah terhad, maka kami memerlukan bekas

video dan tetapkan lebar tetap untuk div dan lebar maksimum: 100%. CSS

Salin kod


Kod tersebut adalah seperti berikut:

.video -pembungkus { lebar: 600px; lebar maksimum: 100%;
}


HTML

Salin Kod

Kodnya adalah seperti berikut: