Vidéo de largeur de fluide

À l'ère d'aujourd'hui des dispositions Web réactives et fluides, il existe un type de média qui entrave l'harmonie parfaite: la vidéo. Il existe de nombreuses façons d'afficher des vidéos sur le site Web. Vous pouvez héberger vos vidéos et passer par HTML5<video></video> Affichage de balise; peut également être fourni en utilisant YouTube, Vimeo ou autre<iframe></iframe> Code pour afficher le fournisseur de vidéos. Voyons comment conserver toutes les vidéos dans la largeur du fluide tout en conservant le rapport d'aspect approprié.

Dans ces scénarios d'intégration vidéo, il est très courant de déclarer des largeurs et des hauteurs statiques.

<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>

Je suppose-le? Déclarer une largeur statique dans un environnement de largeur de fluide n'est pas une bonne idée. Que se passe-t-il si le conteneur parent de la vidéo se rétrécit à moins que les 400 pixels déclarés? Il débordera et peut avoir l'air ridicule et maladroit.

Alors ne pouvons-nous pas faire ça?

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

Oui, vous pouvez! Si vous utilisez une vidéo HTML5 standard, cela adaptera la vidéo à la largeur du conteneur. Surtout, lorsque vous le faites, supprimez la déclaration de hauteur afin que la vidéo se développe et rétrécit pour maintenir son rapport d'aspect afin qu'il n'ait pas une "barre" maladroite qui remplit l'espace vide (contrairement à une image, la vidéo réelle maintient son rapport d'aspect quelle que soit la taille de l'élément).

Vous pouvez le faire via CSS (sans vous soucier de ce qui est déclaré dans HTML):

 vidéo {
  / * Remplacer d'autres styles de réactivité * /
  Largeur: 100%! IMPORTANT;
  Hauteur: Auto! IMPORTANT;
}

<iframe></iframe> Vidéos (YouTube, Vimeo, etc.)

Lorsque le traitement passe<iframe></iframe> Nos conseils ci-dessus ne vous aideront pas lors de la transmission de vidéos. La largeur forcée de 100% est valide, mais lorsque nous réglons height: auto nous nous retrouvons avec une hauteur statique de ¹⁵⁰ pixels, ce qui est trop court pour la plupart des vidéos et provoque plus de R&E (absurde et maladroit).

Heureusement, voici quelques solutions possibles. L'un d'eux a été créé pour la première fois par Thierry Kobletz et publié sur une liste à part en 2009: création d'échelle intrinsèque pour les vidéos. En utilisant cette technique, vous enveloppez la vidéo dans un autre élément avec un rapport d'aspect inhérent, puis positionnez absolument la vidéo dans cet élément. Cela nous permet d'obtenir une largeur de liquide et des hauteurs raisonnables sur lesquelles nous pouvons compter.

<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 {
  Position: relative;
  Padding-Bottom: 56,25%; / * 16: 9 * /
  hauteur: 0;
}
.videowrapper iframe {
  Position: absolue;
  en haut: 0;
  à gauche: 0;
  Largeur: 100%;
  hauteur: 100%;
}

Il existe une méthode d'adaptation intelligente qui vous permet d'ajuster le rapport d'aspect directement à partir de HTML, par exemple:

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

.VideOWRAPPER {
  ...
  / * Fallback à 16/9, sinon utilisez le rapport de Html * /
  Padding-Bottom: Calc (var (- Aspect-Ratio, .5625) * 100%);
}

 .VideowRapper iframe,
.videowartapper intégrer,
objet .videOWRapper {}

Mais ... rapport d'aspect, contenu ancien, utilisateurs non techniques, etc.

La technique ci-dessus est excellente, mais elle a quelques limites possibles:

1. Il nécessite un élément de wrapper, donc la copie et le coller du code directement à partir de YouTube ne sont pas possibles. Les utilisateurs doivent être plus intelligents.
2. Si vous avez un ancien contenu et que vous redessez à Fluid, toutes les anciennes vidéos ont besoin de modifications HTML.
3. Toutes les vidéos nécessitent le même rapport d'aspect. Sinon, ils seront jetés à différents ratios d'aspect et vous obtiendrez des "barres". Alternativement, vous aurez besoin d'une boîte à outils de nom de classe applicable pour s'ajuster, ce qui ajoute une complexité supplémentaire.

Si l'une de ces restrictions s'applique à vous, vous voudrez peut-être envisager d'utiliser une solution JavaScript.

Imaginez: lorsque la page se chargera, il affichera toutes les vidéos et enregistrera son rapport d'aspect. Effectuez immédiatement une fois, et chaque fois que la fenêtre est redimensionnée, toutes les vidéos sont redimensionnées pour remplir la largeur disponible et maintenir leur ratio d'aspect. À l'aide de la bibliothèque javascript jQuery, cela ressemble à ceci:

 // Trouvez toutes les vidéos YouTube // étendre ce sélecteur pour Vimeo et tout autre contenu var $ allvideos = $ ("iframe [src ^ = '// www.youtube.com']"),

  // l'élément de la largeur du fluide $ fluidel = $ ("corps");

// Calculer et enregistrer le rapport d'aspect de chaque vidéo $ allvideos.each (function () {

  $ (ceci)
    .Data ('Aspectratio', this.height / this.width)

    // et retirer la largeur / hauteur à code dur.removeattr ('hauteur')
    .reMoveattr ('largeur');

});

// Lorsque la fenêtre est redimensionnée, $ (fenêtre) .resize (function () {

  var newwidth = $ fluidel.width ();

  // ajustez la taille de toutes les vidéos en fonction du rapport d'aspect de chaque vidéo $ allvideos.each (function () {

    var $ el = $ (this);
    $ el
      .Width (Newwidth)
      .Height (Newwidth * $ el.data ('aspectratio'));

  });

// Démarrez la redimensionnement une fois pour corriger toutes les vidéos lorsque la page charge}). Redimensit ();

C'est de là que vient de fitvids.js

En plus de gérer tous ces travaux de redimensionnement, Fitvids.js traverse toutes les vidéos et ajoute un wrapper HTML avec rapport d'aspect activé et le CSS nécessaire. C'est beaucoup plus efficace que de se lier à un gestionnaire de redimensionnement de la fenêtre!

Utilisez à la place Pure Javascript

De nos jours, JQuery n'est plus très populaire. Heureusement, Dave a une version vanille (nécessite un CSS autoproduit):

1. En fait, si ce n'est pas indiqué autrement, tous les navigateurs rendent les balises IFRAME, Canvas, Embed et Object comme 300 pixels × 150 pixels. Même si ce n'est pas dans la feuille de style UA.

La sortie maintient l'image d'origine et son format. Le texte a été paraphrasé et réorganisé pour une amélioration du flux et de la lisibilité tout en préservant la signification d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!