Vidéo intégré sans ascenseur ?

Vidéo intégré sans ascenseur ? - HTML/CSS - Programmation

Marsh Posté le 11-02-2021 à 08:51:48    

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:

Reply

Marsh Posté le 11-02-2021 à 08:51:48   

Reply

Marsh Posté le 11-02-2021 à 09:43:40    

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
Reply

Marsh Posté le 11-02-2021 à 11:09:12    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed