18041 sujets

Questions générales et questions de débutants

<video> responsive

Bonjour à tous
Dans cet article on trouve la balise type:

<video width="400" height="222" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>

Domment exprimer "width" et "height" de façon à ce que le résultat soit responsive?
Modifié par PapyJP (30 Aug 2020 - 22:41)
Modérateur
Bonjour,

On peut mettre dans le css l'unité de width en % (de son conteneur), et height à auto.
video
{
	width:100%;
	height:auto;
}

Amicalement,
Modifié par parsimonhi (28 Aug 2020 - 13:20)
Jean-Pierre-Bruneau a écrit :
Bonjour une vingtaine de vidéos toutes responsive
Regardes le code par exemple ici
http://www.fox-infographie.com/wblog_aidez_les_restos_du_coeur.php

Merci JP
Un autre problème:
pour les personnes dont le navigateur ne supporte pas la balise <video> je voudrais afficher en inclusion la page youtube correspondante.
Cela donne

<video src="/tombes/nobles/sennefer/photo/TT96Atmosphere-short.mp4"  
    controls="controls" poster="/tombes/nobles/sennefer/photo/TT96Atmosphere.jpg">
      <iframe class="youtube" src="https://www.youtube.com/embed/bj8GTLhsIg8" 
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
      </iframe>
</video>

J'ai le même problème de responsivité, car cette fois il s'agit d'un iframe.

iframe.youtube {width:100%;height:auto;border:none;margin:auto;}

height:auto ne fonctionne pas, ce qui est normal
J'ai essayé les "trucs" qui permettent de styler la hauteur en fonction de l largeur, je n'ai pas trouvé celui qui marche.
Peut-être y a-t-il un autre moyen d'insérer une video youtube dans une page???
J'ai trouvé: 

<video src="/tombes/nobles/sennefer/photo/TT96Atmosphere-short.mp4"  controls="controls" poster="/tombes/nobles/sennefer/photo/TT96Atmosphere.jpg">
  <div class="youtube-container R16-9">
    <iframe class="youtube" src="https://www.youtube.com/embed/bj8GTLhsIg8" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>
   </div>
</video>



div.youtube-container {
    position:relative;
    width:100%;
}
div.youtube-container.R16-9 {padding-top:53.25%;}
iframe.youtube{
    height:100%;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
@PapyJp,
avec un "Back to the Future", il y aura toujours un moyen de nous convaincre que la balise video ne pourrait pas bien nous suffire aujourd'hui : quels sont donc les nav-web qui oseraient prétendre à de telles errances ante-chroniques ?

J'en avais produit jadis un cauchemar par ... a-do-be en .flv ou .swf !
Modifié par Arrival (30 Aug 2020 - 22:08)
Je n'en sais rien, c'est au cas où et ça ne coute pas grand chose en lignes de code, mais effectivement ça risque fort d'être inutile.
Autre question:
Je dispose de deux versions de ce fichier, l'une en faible définition, l'autre en HD.
Y aurait il un moyen d'en savoir assez sur la vitesse de chargement pour choisir l'une ou l'autre?
Bonsoir PapyJp,
j'ai commis dernièrement quelques vids disponibles ici :
https://sentrais.eu/timelapse/timelapse.htm
où demeurent des vids en .webm très utiles pour le web.
Daigne apprécier en quoi leur format (et débit) puissent t'intéresser par ce que j'ai considéré de leur éventuelle performance ...
Ah ! j'oubliais : le code-source de la page donc de la vid est librement disponible (donc de la vid par clic-droit).
Modifié par Arrival (30 Aug 2020 - 23:04)
Impossible d’accéder à ce site
Je ne connais le format webm que de réputation, je ne produis pas moi-même de vidéo, c’est une université qui nous a envoyé cette vidéo pour l’intégrer au site. Je n’ai pas l’intention d’aller plus loin que de l’afficher dans une page web
Oui. Quel est le problème?
Ces photos sont destinées à être affichées et si quelqu’un veut les copier ça ne nous dérange pas.
Tu as raison mais c’est ça que m’a demandé le propriétaire du site dont je ne suis que le conseiller technique, à titre gracieux comme il se doit entre retraités.
La difficulté du truc c’est qu’il m’a posé le problème 24h avant la date de parution de sa newsletter mensuelle. Il venait de récupérer la vidéo.
Il est satisfait du résultat, et donc moi de même Smiley biggrin
Sujet clos
Aller à