Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3025 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Vidéo intégré sans ascenseur ?

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Vidéo intégré sans ascenseur ?

n°2375627
Mac Gyver ​974
Posté le 11-02-2021 à 08:51:48  profilanswer
 

Bonjour, je suis novice en intégration de vidéos dans une page HTML...
 
J'ai fait comme ça:
 
<video title="Description de la vidéo preload="auto" autoplay controls>
<source src="video.mp4" type="video/mp4">
 
Mais la vidéo (full HD), est affiché avec des ascenseurs horizontaux et verticaux (vidéo plus grande que l'écran), et je trouve ça immonde...
 
Existe t-il une option pour ajuster la taille quel que soit l'appareil, de sorte que rien ne dépasse, que ça remplisse la page affiché par le navigateur et l'appareil quels qu'ils soient ?
 
 :jap:

mood
Publicité
Posté le 11-02-2021 à 08:51:48  profilanswer
 

n°2375630
mechkurt
Posté le 11-02-2021 à 09:43:40  profilanswer
 

https://css-tricks.com/fluid-width-video/
En gros tu peux mettre un style="width:100%" à ta vidéo et la hauteur s'adaptera ou alors utiliser un parent avec un padding en % correspondant au ratio de ta vidéo (c'est plus une technique pour les iframes)...
 
Ce ne sera pas parfait (une vidéo 4/3 vu dans un smartphone 16/9 en mode paysage aura un ascenseur vertical par exemple).
Après tu peux jouer sur des max-width / max-height en 100vw (viewport width en %) pour contraindre un peu mieux.
Ou essayer d'avoir un mode "fullscreen" en javascript : https://stackoverflow.com/questions [...] fullscreen


---------------
D3
n°2375636
Mac Gyver ​974
Posté le 11-02-2021 à 11:09:12  profilanswer
 

mechkurt a écrit :

https://css-tricks.com/fluid-width-video/
En gros tu peux mettre un style="width:100%" à ta vidéo et la hauteur s'adaptera ou alors utiliser un parent avec un padding en % correspondant au ratio de ta vidéo (c'est plus une technique pour les iframes)...
 
Ce ne sera pas parfait (une vidéo 4/3 vu dans un smartphone 16/9 en mode paysage aura un ascenseur vertical par exemple).
Après tu peux jouer sur des max-width / max-height en 100vw (viewport width en %) pour contraindre un peu mieux.
Ou essayer d'avoir un mode "fullscreen" en javascript : https://stackoverflow.com/questions [...] fullscreen


 
D'accord et merci  :jap:  
 
Le format est 16:9 en l'occurence  :jap:  
 
Je teste ça et je reviens pour dire si ça marche  :)
 
Edit: ça marche nickel, j'ai mis le height et le width en 100% y a jamais d'ascenseur logiquement sur tout appareil comme ça  :love:


Message édité par Mac Gyver 974 le 11-02-2021 à 11:26:33

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Vidéo intégré sans ascenseur ?

 

Sujets relatifs
Lecteur vidéo web qui switch suivant le débit ?HTML : <video> sans devoir charger toute la video avant lecture
Lire une vidéo depuis un serveur sur un site WebCréer un jeu vidéo pour mobile
balise Vidéo au Topbouton télécharger dans le player vidéo sous chrome
Propriété d'un fichier vidéo/audio en vb.netIntegrer 2 video Dailymotion: Bug
Jeux Vidéo Codéscréateur vidéo
Plus de sujets relatifs à : Vidéo intégré sans ascenseur ?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR