Pilou sur PhenixTweet

1 année

Bonjour,
Petite question:
J'insère souvent une video yt dans la description produit (via une iframe).
Comment faire pour qu'elle soit responsive svp ?
Car j'ai souvent un mail de GSC qui me dit "Problème d'ergonomie mobile : Contenu plus large que l'écran" ..

Eolia @eolia

1 année

a répondu au Message de Pilou - 1 année

Il faut utiliser la balise video plutôt et ajouter cette règle css dans votre thème si elle n'y est pas déjà:

CODE
video {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

Eolia @eolia

1 année

a répondu au Message de Eolia - 1 année

Si vous voulez rester avec vos iframe, il faut les placer dans un container (une div class="video-container") et ajouter du css également

CODE    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    }
    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

Pilou @pilou

a répondu au Message de Eolia - 1 année

J'ai copié le code ci-dessus dans un custom.css de mon thème.
Sur la fiche produit, j'ajoute le code.

Sur mobile, c'est impeccable mais sur desktop, la video est toute petite.

code.txt

FICHIER TXT