Centrer une vidéo Youtube

Résolu
Eritou -  

Bonjour,

Je reviens de X forums, et malheureusement pas de solution à mon problème.

Impossible de centrer ma vidéo Youtube.

Je vous laisse le HTML :

<div class="youtube"><iframe width="560" height="315" src="https://www.youtube.com/embed/jpYH0s1MgPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

Ainsi qhe les CSS :

.youtube {
  text-align:center;
  margin: 0 auto;
 width: 40%;
 /* widht:40vw */
display:block;
}

La capture montre l'écran dans sa largeur totale (étroite) . En largeur normale, la vidéo est bien centrée.

Merci à vous ;)

E.


Macintosh / Firefox 109.0

12 réponses

  1. Eritou Auteur

    Pour le titre... résolu aussi.

    Il y avait un padding left et right sur le parent.

    Bonne journée :)

    1. Eritou Auteur

      Merci à vous deux, problème résolu... une erreur de code ;)

      Bonne soirée, et si vous avez une idée pour le titre :D

      1. Benjos_2106

        Re

        Normalement j'ai modifier cela dite moi si cela vous convient.

        HTML :

        <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <div class="container">
        <div class="text">
            <h1 class="titre_psyche"> White Rabbit </h1>
            <p>Jefferson Airplane</p>
            <h3 class="blue">And the ones that mother gives you, don't do anything at all</h3>
        <iframe class="youtube" width="560" height="315" src="https://www.youtube.com/embed/WANNqr-vcx0"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>
        <h3 class="blue">And call Alice, when she was just small</h3>
    </div>
    </div>
</body>

</html>

        CSS :

        .text {
    text-align: center;
}

.blue {
    font-size: 3vw;
    color: yellow;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif !important;
    letter-spacing: 1px;
    text-shadow: 0px 0px 10px black;
    margin-bottom: 5px;
}   

.titre_psyche {
    color: white;
    font-size: 10em;
    text-shadow: #FF69B4 10px 0 10px;
    letter-spacing: .2rem;
}

.youtube {
    width: 50%;
    height: 50vh;
}

@media (max-width: 400px) {
    .youtube {
        width: 90%;
    }
}

        J'ai refait une partie du code pour qu'il soit plus lisible.

        1. Eritou Auteur

          Merci énormément de prendre ton temps  Benjos, mais le résultat est terrible :(

          Je pense plutôt qu'il faut régler le problème de centrage du second code de Sonia. Une idée ?

          Encore merci et bonne soirée ;)

      2. Eritou Auteur 
        
Cependant, je me permets également de vous proposer une autre solution qui vous permettra de faire en sorte que la taille de votre vidéo s'adapte à la largeur de votre écran tout en restant centrée bien évidemment. Voici ma solution

        Cette version fonctionne, mais quelle que soit la taille, le vidéo est légèrement décalée à gauche (voir capture) :!

        Merci à vous ;)

        3. Benjos_2106

          Normalement ceci doit fonctionner (pense a changer ton link css).

          Code HTML :

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="bolo">

        <div class="texte_a">
            <h1 style="font-family:retro_coolregular" class="titre_psyche"> White Rabbit</h1>
            <br>
            Jefferson Airplane<br>
            <h3 class="blue">And the ones that mother gives you, don't do anything at all</h3>


            <div class="youtube">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/jpYH0s1MgPk"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen></iframe>
            </div>


            <h3 class="blue">And call Alice, when she was just small</h3>
        </div>
    </div>
</body>

</html>

          Code CSS :

          .texte_a {
  text-align: center;
}

.blue {
  font-size: 3vw;
  /* ou 5vw comme dans l'attribut "style" de votre balise <h3> */
  line-height: 3vw !important;
  color: yellow;
  /* ou white comme dans l'attribut "style" de votre balise <h3> */
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif !important;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0px 0px 10px black;
  margin-bottom: 0px;
}

.bluefr {
  text-align: center;
  font-size: 5vw;
  letter-spacing: 1px;
  color: white;
  line-height: 100%;
  text-shadow: 0px 0px 10px black;
  margin-top: -800px;
}

.titre_psyche {
  color: white;
  font-size: 10em;
  text-shadow: #FF69B4 10px 0 10px;
  letter-spacing: .2rem;
  text-align: center;
}
          1. Benjos_2106

            Re Eritou !

            Pour être sur d'avoir bien compris, tu souhaite centrer ton titre ton texte ainsi que la vidéo ces bien cela ?

            De plus fait attention ta div avec l'id bolo n'est pas ouverte correctement. De même pour ton css avec la class "bluefr" tu a oublie les deux point après ton  margin-top.

            1. Eritou Auteur

              Bonsoir Sonia et Benjos,

              Cela ne fonctionne toujours pss  (titre + vidéo).

              Mon HTML :

              div id="bolo">

<div class="texte_a"><h1 style="font-family:retro_coolregular" class="titre_psyche"> White Rabbit</h1>
									<br>
Jefferson Airplane<br>
<h3 class="blue">And the ones that mother gives you, don't do anything at all</h3>

									
<div class="youtube">
    <iframe width="560"
            height="315" src="https://www.youtube.com/embed/jpYH0s1MgPk"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>
</div>
									

<h3 class="blue">And call Alice, when she was just small</h3>
</div></div>

              et mes CSS :

              			.texte_a {
				width: 100vw;
				padding-left: 20vw;
				padding-right:20vw;
				padding-top:10vh;
				padding-bottom: 10vh;
				background-image: url("../images/fond_psyche.gif");
background-attachment: fixed;
background-size: cover;
text-align: center;
background-position: center;		font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;

}

.blue {
    font-size: 3vw; /* ou 5vw comme dans l'attribut "style" de votre balise <h3> */
    line-height: 3vw !important;
    color: yellow; /* ou white comme dans l'attribut "style" de votre balise <h3> */
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif !important;
    letter-spacing: 1px;
    text-align: center;
    text-shadow:0px 0px 10px black;
    margin-bottom: 0px;
}
.bluefr {text-align: center; font-size:5vw; letter-spacing: 1px;color: white; line-height:100%; text-shadow:0px 0px 10px black;    margin-top -800px;
}

.titre_psyche {color: white;
font-size: 10em;
text-shadow: #FF69B4 10px 0 10px;
letter-spacing: .2rem;
text-align: center;}

              Sauf erreur de ma part,rien est attribué à la div #bolo.

              Merci pour votre aide et bonne soirée,

              E.

              1. Benjos_2106

                Bonsoir,

                Les text-align permet d'aligner ton texte.

                Pour centrer ta vidéo youtube réalise cela avec des display flex.

                Voici le code HTML :

                <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div class="container">
    <div class="youtube">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/jpYH0s1MgPk" title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen></iframe>
    </div>
  </div>
</body>

</html>

                Voici le code CSS :

                .container {
  display: flex;
  justify-content: center;
}

                Pense a changé ton lien css afin de mettre ton bon nom de fichier.

                N'hésite pas a me dire si cela ne fonctionne pas !

                1. Sonia

                  Sans plus d'informations concernant la structure précise de votre page, il va être compliqué pour moi de vous aider.

                  Pouvez-vous m'envoyer tout le code HTML de votre page qui pose problème avec tout le CSS également ?

                  Je vous remercie.

                  1. Eritou Auteur

                    Bonjour Sonia :D

                    Ma div est composée de :

                    titre

                    paroles

                    vidéo youtube

                    paroles (suite et fin).

                    Seul les paroles sont centrées avec une fenêtre réduite, le titre et la vidéo "partent" à droite (voir capture).

                    Pourtant j'ai appliqué toutes les modifications :/

                    Merci pour votre sympathie ;)

                    E.

                    1. Sonia

                      Bonjour Eritou !

                      Votre problème concernant "l'impossibilité" de centrer votre vidéo s'explique par plusieurs choses :

                      - Votre CSS n'était pas très optimisé et surchargeait un des attributs propriétés de votre balise <iframe>, notamment la propriété "width". Dans votre balise <iframe> se trouve déjà un attribut ("width") qui définit nativement la largeur de votre vidéo YouTube. Cette dernière est donc inutile dans votre classe ".youtube".

                      - Votre propriété "margin" n'est pas non plus d'une très grande utilité, vous pouvez l'enlever.
                       

                      En apportant ces modifications à votre classe CSS ".youtube" vous devriez voir votre balise <iframe> centrée. Voici donc à quoi ressemble votre code à présent :

                      Votre code CSS :

                      .youtube {
    text-align:center;
    display:block;
}


                      Votre code HTML :

                      <div class="youtube">
    <iframe width="560"
            height="315" src="https://www.youtube.com/embed/jpYH0s1MgPk"
            title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>
</div>



                      Cependant, je me permets également de vous proposer une autre solution qui vous permettra de faire en sorte que la taille de votre vidéo s'adapte à la largeur de votre écran tout en restant centrée bien évidemment. Voici ma solution :

                      Le code CSS :

                      /* Classe .container qui servira à appliquer à votre <div> le fait que tout son contenu devra être centré */
.container {
    text-align:center;
}

/* Classe .youtube qui servira à définir les style de votre balise <iframe> et donc de gérer sa taille dynamiquement avec les unités vw */
.youtube {
    height: 30vw;
    width: 50vw;
}


                      Le code HTML :

                      <!-- Votre balise div sur laquelle on appelle votre classe .container -->
<div class="container">

    <!-- Votre balise iframe sur laquelle j'ai enlevé les attributs "width" et "height" qui sont déjà gérés dans votre classe CSS .youtube appelée ici -->
    <iframe class="youtube" src="https://www.youtube.com/embed/jpYH0s1MgPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</div>


                      Notez que dans cet exemple, j'ai divisé mon approche en deux :

                      - J'ai donc une balise <div> sur laquelle j'appelle ma classe ".container" qui servira a gérer le fait que votre vidéo doit être centrée quoi qu'il arrive.

                      - J'ai ensuite modifié la balise <iframe> sur laquelle j'ai enlevé les attributs "width" et "height" qui sont déjà gérés dans votre classe CSS ".youtube", appelée sur votre balise <iframe>.

                      J'espère que ces deux corrections vous conviendront et permettront à répondre à vos attentes. Si vous avez d'autres questions ou d'autres problèmes, n'hésitez pas !

                      Discussions similaires

                      Tubidy télécharger gratuitement des vidéos sur Youtube ou Myspace
                      Peyton 5

                      10 réponses