Video lebar cecair

Dalam era susun atur web responsif dan cecair hari ini, terdapat sejenis media yang menghalang keharmonian yang sempurna: video. Terdapat banyak cara untuk memaparkan video di laman web. Anda boleh menjadi tuan rumah video anda dan melalui HTML5<video></video> Paparan tag; mungkin juga disediakan menggunakan YouTube, Vimeo atau lain -lain<iframe></iframe> Kod untuk memaparkan pembekal video. Mari lihat bagaimana untuk menyimpan semua video dalam lebar bendalir sambil mengekalkan nisbah aspek yang betul.

Dalam senario penyembuhan video ini, sangat biasa untuk mengisytiharkan lebar dan ketinggian statik.

<video ...="" controls="" height="300" width="400"></video>
<iframe ...="" height="300" width="400"></iframe>
<object ...="" height="300" width="400"></object>
<embed ...="" height="300" width="400"></embed>

Tebak? Mengisytiharkan lebar statik dalam persekitaran lebar bendalir bukanlah idea yang baik. Apa yang berlaku jika bekas induk video mengecut kepada kurang daripada 400 piksel yang diisytiharkan? Ia akan melimpah dan mungkin kelihatan tidak masuk akal dan janggal.

Jadi tidak bolehkah kita melakukan ini?

<video ...="" width="100%"></video>

Ya, anda boleh! Jika anda menggunakan video HTML5 standard, ini akan menyesuaikan video ke lebar bekas. Yang penting, apabila anda melakukannya, keluarkan pengisytiharan ketinggian supaya video tumbuh dan mengecut untuk mengekalkan nisbah aspeknya supaya ia tidak mempunyai "bar" yang janggal yang mengisi ruang kosong (tidak seperti imej, video sebenar mengekalkan nisbah aspeknya tanpa mengira saiz elemen).

Anda boleh melakukan ini melalui CSS (tanpa bimbang tentang apa yang diisytiharkan dalam HTML):

 video {
  /* Mengatasi gaya lain untuk responsif*/
  Lebar: 100%! Penting;
  Ketinggian: Auto! Penting;
}

<iframe></iframe> Video (YouTube, Vimeo, dll.)

Apabila pemprosesan berlalu<iframe></iframe> Petua di atas kami tidak akan membantu apabila menghantar video. Lebar paksa 100% adalah sah, tetapi apabila kita menetapkan height: auto kita berakhir dengan ketinggian statik ¹⁵⁰ piksel, yang terlalu pendek untuk kebanyakan video dan menyebabkan lebih banyak R & E (tidak masuk akal dan janggal).

Nasib baik, berikut adalah beberapa penyelesaian yang mungkin. Salah seorang daripada mereka pertama kali dicipta oleh Thierry Kobletz dan diterbitkan dalam senarai selain pada tahun 2009: mencipta skala intrinsik untuk video. Menggunakan teknik ini, anda membungkus video dalam elemen lain dengan nisbah aspek yang wujud dan kemudian meletakkan video dalam elemen itu. Ini membolehkan kita mendapatkan lebar bendalir dan ketinggian yang munasabah yang boleh kita bergantung.

<div class="videoWrapper">
  <iframe allowfullscreen="" frameborder="0" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" width="560"></iframe>
</div>

.videowrapper {
  Kedudukan: Relatif;
  Padding-Bottom: 56.25%; / * 16: 9 */
  ketinggian: 0;
}
.VideowRapper iframe {
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
}

Terdapat kaedah penyesuaian pintar yang membolehkan anda menyesuaikan nisbah aspek secara langsung dari HTML, sebagai contoh:

<div style="--aspect-ratio: 3 / 4;">
  <iframe ...></iframe>
</div>

.videowrapper {
  …
  /* Sandaran ke 16/9, jika tidak, gunakan nisbah dari html*/
  padding-bottom: calc (var (-aspek nisbah, .5625) * 100%);
}

 .videowrapper iframe,
.videowrapper ditanam,
.videowrapper objek {}

Tetapi ... nisbah aspek, kandungan lama, pengguna bukan teknikal, dll.

Teknik di atas hebat, tetapi ia mempunyai beberapa batasan yang mungkin:

1. Ia memerlukan elemen pembalut, jadi menyalin dan menampal kod secara langsung dari YouTube tidak mungkin. Pengguna perlu lebih bijak.
2. Jika anda mempunyai kandungan lama dan mendesain semula kepada cecair, semua video lama memerlukan tweak HTML.
3. Semua video memerlukan nisbah aspek yang sama. Jika tidak, mereka akan dibuang ke nisbah aspek yang berbeza dan anda akan mendapat "bar". Sebagai alternatif, anda memerlukan kotak alat nama kelas yang berkenaan untuk menyesuaikan, yang menambah kerumitan tambahan.

Jika mana -mana sekatan ini dikenakan kepada anda, anda mungkin ingin mempertimbangkan menggunakan penyelesaian JavaScript.

Bayangkan: Apabila halaman dimuatkan, ia akan melihat semua video dan menyimpan nisbah aspeknya. Lakukan sebaik sahaja sekali, dan apabila tingkap saiznya, semua video diubah saiz untuk mengisi lebar yang tersedia dan mengekalkan nisbah aspek mereka. Menggunakan perpustakaan JQuery JavaScript, nampaknya ini:

 // Cari semua video YouTube // Lanjutkan pemilih ini untuk vimeo dan mana -mana kandungan lain var $ allVideos = $ ("iframe [src^= '// www.youtube.com']"),

  // unsur lebar bendalir $ fluidel = $ ("badan");

// Hitung dan simpan nisbah aspek setiap video $ allVideos.each (fungsi () {

  $ (ini)
    .data ('aspectratio', this.height / this.width)

    // dan keluarkan lebar/ketinggian yang berkod keras.removeattr ('ketinggian')
    .removeattr ('lebar');

});

// Apabila tetingkap diubahsuai, $ (tetingkap) .Resize (fungsi () {

  var newWidth = $ fluidel.width ();

  // Laraskan saiz semua video mengikut nisbah aspek setiap video $ allVideos.each (fungsi () {

    var $ el = $ (ini);
    $ el
      . Width (NewWidth)
      .height (newWidth * $ el.data ('aspectratio'));

  });

// mula saiz semula sekali untuk menetapkan semua video apabila halaman dimuatkan}). Saiz semula ();

Di sinilah fitvids.js berasal

Di samping mengendalikan semua kerja saiz semula ini, gelung Fitvids.js melalui semua video dan menambah pembalut HTML dengan nisbah aspek yang didayakan dan CSS yang diperlukan. Ini jauh lebih cekap daripada perlu mengikat pengendali saiz semula tingkap!

Gunakan JavaScript Pure

Pada masa kini, jQuery tidak lagi sangat popular. Nasib baik, Dave mempunyai versi vanila (memerlukan CSS yang dihasilkan sendiri):

1. Malah, jika tidak dinyatakan sebaliknya, semua pelayar memberikan iframe, kanvas, embed, dan tag objek sebagai 300 piksel × 150 piksel. Walaupun ini tidak berada dalam lembaran gaya UA.

Output mengekalkan imej asal dan formatnya. Teks itu telah diuraikan dan disusun semula untuk aliran dan kebolehbacaan yang lebih baik sambil memelihara makna asal.

Atas ialah kandungan terperinci Video lebar cecair. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!