1486 sujets

Web Mobile et responsive web design

Responsivité d'une vidéo provenant de Youtube

Bonjour à vous,

Je suis confronté à une difficulté particulière que je n'ai pas encore rencontré. Imaginons que j'ai une page web dans laquelle une vidéo s'affiche dans des dimensions normales quand on est sur un écran desktop ou tablette, l'intégralité de la vidéo s'affiche. Imaginons ensuite que cette même vidéo s'affiche sur un smartphone. Mais comme les écrans sont plus petits en largeur, la vidéo en question se trouve trop grande. Comment faire pour modifier les valeurs des attributs width et height incluses dans le code HTML, quand on sait que le responsive ne peut s'appliquer qu'aux propriétés CSS ? Peut-on dire dans les media queries de la feuille CSS de changer les valeurs des attributs HTML width et heigh de sorte que la vidéo s'adapte en largeur à l'écran du smartphone ?

Merci pour votre aide
Modifié par ObiJuanKenobi (19 Jan 2023 - 09:29)
Bonjour,
déjà, quoi qu'il arrive, dans ton css, tout en haut :
img, object, embed, canvas, video, audio, picture {
       max-width:100%;
       height:auto;
       border:0;}

Ensuite, ta vidéo devrait être normalement dans un container. C'est préférable pour la manipuler sur la page. Et dans les @media de la partie mobile, c'est sur ce container que tu vas définir si la vidéo occupe toute la largeur de l'écran ou une partie, en laissant une petite marge de chaque côté. C'est max-width:95%; qui remplit ce rôle. Un exemple chez moi :
.slideshow {
    display:block;
    position:relative;
    padding:0;
    max-width:95%;
    height:14rem;
    margin:1rem auto;    
    overflow:hidden;
    background-repeat:no-repeat;}

Tu ne touche pas le html. Les dimensions données pour une vidéo ou une image dans le html ont pour but principal d'éviter le "repaint", très désagréable sur une page qui en renferme beaucoup. Bien sûr, il est préférable de donner ici les dimensions réelles de la vidéo.
Dans le css et sur le container, les dimensions données vont jouer sur l'affichage dans ta page. Notamment le height, que tu peux mettre à auto ou à une dimension de ton choix (en respectant quand même le ratio).
C'est en tous cas comme ça que ça fonctionne sur deux de mes sites, et c'est parfaitement responsive.
Entre le responsive, les formats de compression, le ratio à respecter, la bande passante, le streaming, la vidéo n'est pas une affaire facile sur les pages web.
Meilleure solution
Moi j'ai opté pour une option sans media queries : videos.
Pour cela je fais comme ceci :
.vidéo {
  width: 100%;
  max-width: 100%;
  height: auto;
  /*aspect-ratio: 16/9;*/
}

Voilà pour la base.

Édit : aspect-ratio en lieu et place de height pour forcer un format si besoin.
Modifié par Olivier C (23 Jan 2023 - 17:26)
Salut,
le plus fort, c'est qu'en enlevant la partie @media pour les mobiles, ça continue à fonctionner en responsive chez moi. Tout en gardant :
img, object, embed, canvas, video, audio, picture {
       max-width:100%;
       height:auto;
       border:0;}

Par contre, l'affichage de ma vidéo est réduite, elle ne colle plus les bords de l'écran en mobile. D'où l'intérêt du container pour ajuster.
Attention @ObiJuanKenobi, si tu adoptes cette solution, cible bien la vidéo ou son container. Parce que sinon width:100 % appliqué aussi à img, objet, embed, canvas, audio, picture va t'apporter des surprises.
Merci pour toutes ces explications, j'ai saisi que de sont des propriétés CSS qu'il faut utiliser dans une class affectée à la vidéo et ne pas toucher aux attributs width et height. Cela fonctionne parfaitement.

Par contre, je n'ai pas eu besoin de placer :
img, object, embed, canvas, video, audio, picture {
       max-width:100%;
       height:auto;
       border:0;}
juste utiliser ceci : 
.slideshow {
    display:block;
    position:relative;
    padding:0;
    max-width:95%;
    height:14rem;
    margin:1rem auto;    
    overflow:hidden;
    background-repeat:no-repeat;}

Modifié par ObiJuanKenobi (19 Jan 2023 - 13:34)
Une vieille astuce avec une video ou une iframe youtube par exemple, et qui sera toujours responsive au format 16/9 dans cet exemple, ajuster le ratio suivant le format désiré.


<!-- video source -->
<div class="video_wrap">
    <video>
        <source src="video.mp4" type="video/mp4" />
    </video>
</div>

<!-- video youtube -->
<div class="video_wrap">
    <iframe  src="https://www.youtube.com/embed/xxxxxxxxxxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>




.video_wrap {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25%;  //ratio 16/9 calculé : 9 / 16 * 100
}

.video_wrap video,
.video_wrap iframe {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     border:0;        
}
Prévenir un modérateur
Répondre au sujet
Aller à