Rendre video YouTube responsive par Jokoa - page 1

Bonjour,

J'essaie d'intégrer une vidéo YouTube de manière responsive. Mon problème est que je n'arrive pas à enlever totalement les bordures de la vidéo et la video n'est pas totalement centré sur smartphone.
Je l'ai fait pour des photos et ça me semble correct avec les media queries.

Si quelqu'un peut jeter un coup d'œil à mon code..

PHOTO

<body>
 
 
    <div class="photo-conteneur">
        <img src="images/souvenir_02.webp" alt="souvenir">
    </div>
 
 
 
</body>

VIDEO

<body>
 
 
 
    <div class="video-conteneur"> <iframe class="centrer-vid"
            src="https://www.youtube.com/embed/C0DPdy98e4c?version=3&loop=1&autoplay=1&controls=0&playlist=C0DPdy98e4c"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe></div>
 
 
 
</body>

CSS

body {
  background-color: rgb(0, 0, 0);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari et Chrome */
  -o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  /* sur Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  /* sur Safari et Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  /* sur Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 
body::before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url(images/bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: black;
}
 
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
 
/* Video */
 
.centrer-vid {
  text-align: center;
  margin-top: 50vh;
  transform: translateY(-50%);
  display: block;
  margin-left: auto;
  margin-right: auto;
  min-height: 75vh;
}
 
.video-conteneur iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1em 3em 0.5em rgba(0, 0, 0, 0.623);
  border: solid #c80044 22px;
}
 
/* photo */
 
.photo-conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}
 
img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1em 3em 0.5em rgba(0, 0, 0, 0.623);
  border: solid #c80044 22px;
  max-width: 100%;
  height: auto;
}
 
@media only screen and (min-width: 1680px) {
  img {
    width: 15%;
  }
}
 
/*Pour tous les appareils équipés d'écrans et dont la largeur est inférieure à 1680px*/
@media only screen and (max-width: 1680px) {
  img {
    width: 30%;
  }
}
 
@media only screen and (max-width: 1281px) {
  img {
    width: 30%;
  }
}
 
@media only screen and (max-width: 981px) {
  img {
    width: 50%;
  }
}
 
@media only screen and (max-width: 737px) {
  img {
    width: 65%;
  }
}
 
@media only screen and (max-width: 481px) {
  img {
    width: 75%;
  }
}
 
@media only screen and (max-height: 375px) {
  img {
    width: 25%;
  }
}
 
@media only screen and (max-height: 428px) {
  img {
    width: 25%;
  }
}

Si vous trouvez des incohérences dans mon code n'hésitez pas. Merci

-
Edité par Jokoa 4 décembre 2021 à 23:53:29

Jokoa

22 novembre 2021 à 12:11:45

Domi65

22 novembre 2021 à 15:13:35

hello !

Il suffit d'ajouter la déclaration max-width: 100% à l'iframe pour que ta vidéo ne déborde pas.

22 novembre 2021 à 15:45:14

Merci pour ta réponse.

Ca n'a pas résolu mon souci. Voici mon problème en photo :

Sur Mac (tout est bien centré)

Sur iPhone (la video n'est pas correctement centré)

Voici le résultat que j’aimerais obtenir avec les vidéos :

EDIT

Et sur l’avant-derrière photo, j’aimerais que mon cadre rose s’adapte à la vidéo, sans voir les bandes noires de youtube, je ne sais pas si c’est possible..

-
Edité par Jokoa 22 novembre 2021 à 16:37:20

26 novembre 2021 à 0:09:48

Il n'y a personne qui puisse m'aider ? :/

26 novembre 2021 à 11:07:19

Le CSS de ta page ne permet pas de contrôler ce qui se passe à l'intérieur de ton iframe. Si tu souhaites modifier les dimensions de l'iframe en fonction des dimensions de la vidéo qu'il contient, il te faudra passer par du JS.

Rendre video YouTube responsive

Rendre video YouTube responsive

Supprimer

Modérer

Signaler le message aux modérateurs