Centrer une vidéo Youtube

Résolu
Eritou Messages postés 120 Statut Membre -  
Eritou Messages postés 120 Statut Membre -

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
  2. Eritou Messages postés 120 Statut Membre 4
     

    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
  3. 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
  4. Benjos_2106 Messages postés 25 Statut Membre
     

    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

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Eritou Messages postés 120 Statut Membre 4
     

    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
  7. Benjos_2106 Messages postés 25 Statut Membre
     

    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
  8. Benjos_2106 Messages postés 25 Statut Membre
     

    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
  9. Eritou Messages postés 120 Statut Membre 4
     

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

    0
  10. Eritou Messages postés 120 Statut Membre 4
     
    
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
  11. Benjos_2106 Messages postés 25 Statut Membre
     

    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 Messages postés 120 Statut Membre 4
       

      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
  12. Eritou Messages postés 120 Statut Membre 4
     

    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
  13. Eritou Messages postés 120 Statut Membre 4
     

    Pour le titre... résolu aussi.

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

    Bonne journée :)

    0

Discussions similaires

TokyVideo : avis, site fiable ou arnaque ?
timinie -
Cinephile06 -

8 réponses
Tubidy télécharger gratuitement des vidéos sur Youtube ou Myspace
Peyton 5 -
Jackson -

10 réponses