Partage
  • Partager sur Facebook
  • Partager sur Twitter

Rendre video YouTube responsive

    22 novembre 2021 à 12:11:45

    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

    • Partager sur Facebook
    • Partager sur Twitter
      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.

      • Partager sur Facebook
      • Partager sur Twitter
        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

        • Partager sur Facebook
        • Partager sur Twitter
          26 novembre 2021 à 0:09:48

          Il n'y a personne qui puisse m'aider ? :/
          • Partager sur Facebook
          • Partager sur Twitter
            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.
            • Partager sur Facebook
            • Partager sur Twitter

            Rendre video YouTube responsive

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown