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. 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 !

    1
    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.

      0
      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.

        0
        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 !

          0
          2. 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.

            0
            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.

              0
              1. 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;
}
                0
                1. Eritou Auteur

                  Bouhhhhhh :(((( toujours pas :((((((

                  0
                  1. 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 ;)

                    0
                    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.

                      0
                      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 ;)

                        0
                    2. 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

                      0
                      1. Eritou Auteur

                        Pour le titre... résolu aussi.

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

                        Bonne journée :)

                        0

                        Discussions similaires

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

                        10 réponses
                        TokyVideo : avis, site fiable ou arnaque ?
                        timinie

                        8 réponses