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

Réponse 1 / 12
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
Réponse 2 / 12
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
Réponse 3 / 12
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
Réponse 4 / 12
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

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

Posez votre question
Réponse 5 / 12
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
Réponse 6 / 12
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
Réponse 7 / 12
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
Réponse 8 / 12
Eritou Messages postés 120 Statut Membre 4
 

Bouhhhhhh :(((( toujours pas :((((((
0
Réponse 9 / 12
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
Réponse 10 / 12
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
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
Réponse 11 / 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
Réponse 12 / 12
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