28112 sujets

CSS et mise en forme, CSS3

[Résolu] Mettre une vidéo youtube en width: 50%

Bonjour à tous,
TOUS les sites sur la vidéo responsive parlent d'intégrer une vidéo Youtube en fullscreen (avec un padding-bottom à 56,5%), mais aucun ne parle d'une vidéo avec une largeur de .... 50%.
J'y arrive avec le HTML suivant :
<iframe style="width:50%;height:75vw;max-height:50vh;" src="https://www.youtube.com/embed/ScxR8V4nW50" class="iframe" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="50%" height="50%" frameborder="0"></iframe>

Mais le problème, c'est que je ne peux pas la mettre à width:100% sur portable via les Médias Quéries.
Ai-je tort ? Comment faire ?
Merci pour votre aide,
ED
Effectivement, le style en ligne (directement sur une balise html via l'attribut `style`) ne peut pas jouer avec les medias queries. Il faut donc le faire à partir d'une feuille de styles pour bénéficier de ces derniers.

Pour ce faire il faut (encore une fois) cibler l'élément html en CSS, ici une iframe. Afin d'éviter des problèmes de scope futurs, vous pourriez ajouter une classe "video" à celle déjà présente, ce qui vous éviterait de cibler tous vos iframes, mais seulement ceux comportant des vidéos :
<iframe ... class="iframe video" ... ></iframe>

Ce qui donnerait donc pour le ciblage CSS :
.video {}

Ou, sans rien modifier du html, vu qu'il y a déjà un title avec "video", on pourrait imaginer ceci :
.iframe[title*=video] {}

Maintenant on peut reparler des media queries :
/* exemple pour une philosophie mobile first : */
@media (min-width: 48.01em) {
  .video {
    max-width: 50%;
  }
}

Modifié par Olivier C (19 Dec 2021 - 16:03)
Meilleure solution
YES !!!!
Encore quelque chose de simple à côté de laquelle je suis passé.
J'y ai pourtant pensé mais je n'ai pas osé...
MERCI, MERCI !!! Smiley biggrin
Donc, maintenant mes CSS ressemblent à ça :
.video{
	width:50%;
	height:75vw;
	max-height:50vh;
}
@media (min-width: 48.01em) {
  .video {
    max-width: 100%;
  }
}

et le HTML :
<iframe src="https://www.youtube.com/embed/ScxR8V4nW50" class="iframe video" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=" frameborder="0"></iframe>


C'est TOP, sauf que je me retrouve avec une marge en haut de la vidéo et un cadre noir apparaît. Ce n'est pas important pour le cadre, mais pour la vidéo non calée Smiley murf
Une idée ?
Encore MERCI !
Bonne soirée,
ED upload/1639929244-48192-capturedaeacran2021-12-19aa16.png
Pour la bordure sur l'iframe, il faut peut-être faire un :
iframe {
  border: none;
}

Pour la marge en haut de la vidéo, c'est peut-être en raison de la hauteur définie décrite plus haut :
height:75vw

Mais pour tout cela j'ai sorti ma boule de cristal, parce que sans voir le code... Smiley cligne
Bonjour Olivier,
Merci mais c'était une erreur de ma part, un signe en trop dans le code. Tout est rentré dans l'ordre. Merci pour tout, t'es génial !!!!
Bonne journée,
ED
Sujet clos
Aller à