web-dev-qa-db-fra.com

Comment puis-je aligner la vidéo intégrée de YouTube au centre du bootstrap?

J'essaie d'aligner la vidéo intégrée de YouTube au centre de la page dans la page de démarrage. La taille de la vidéo est toujours la même.

Mon html a l'air très simple:

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

J'ai essayé différentes solutions de stackoverflow (qui ne traitait que du centrage d'une division, pas d'une vidéo) et le meilleur que j'ai pu trouver était ce violon .

J'ai déjà essayé solution1 , solution2 , solution3 mais sans résultat. Une autre solution partiellement efficace consistait à utiliser:

width: 50%;
margin: 0 auto;

Cela a bien fonctionné sur un ordinateur de bureau, mais a échoué sur un iPad ou un téléphone (la vidéo est partiellement sortie d'un écran). Comment est-il possible de bien centrer la vidéo sur le bureau/tablette/téléphone?

csstwitter-bootstrapyoutube
10
Salvador Dali

Une chose importante à noter/"Bootstrap" est juste un tas de règles CSS

un violon

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>


CSS

/* key stuff */
.your-centered-div {
    width: 560px; /* you have to have a size or this method doesn't work */
    height: 315px; /* think about making these max-width instead - might give you some more responsiveness */

    position: absolute; /* positions out of the flow, but according to the nearest parent */
    top: 0; right: 0; /* confuse it i guess */
    bottom: 0; left: 0;
    margin: auto; /* make em equal */
}

Entièrement fonctionnel jsFiddle est ici .

MODIFIER

Je l'utilise surtout ces jours-ci:

cSS droite

.centered-thing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

si vous utilisez des stylets/mixins (vous devriez ... c'est le meilleur)

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

De cette façon ... vous n'avez pas besoin de connaître la taille de l'élément - et la traduction est basée sur sa taille - soit -50% de lui-même. Soigné.

10
sheriffderek

Youtube utilise iframe . Vous pouvez simplement le régler sur:

iframe {
   display: block;
   margin: 0 auto;
}
6
ToTech
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
3
Miloud Eloumri

Vous n'avez pas du tout mettre <iframe> dans une division parent. Vous pouvez cibler exactement youtube iframe avec CSS/3:

iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
   display: block;
   margin: 0 auto;
}
2
T.Todua

Utilisation de Bootstrap dans .center-block class, qui définit les marges gauche et droite sur auto:

<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>

Ou en utilisant le .text-center class intégré, qui définit text-align: center:

<div class="text-center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
0
Bruno Peres

Je règle la largeur maximale de ma vidéo sur 100%. Sur les téléphones, la vidéo s'adapte automatiquement à la largeur de l'écran. Étant donné que la vidéo incorporée ne fait que 560 pixels de large, j'ai simplement ajouté une marge gauche de 10% à l'iframe et ajouté un "0" dans la marge de la feuille de style CSS mobile (pour autoriser la vue en pleine largeur). Je ne voulais pas me donner la peine de mettre une div à chaque vidéo ...

CSS de bureau:

iframe {
		margin-left: 10%;
	}

CSS mobile:

iframe {
		margin-left: 0;
	}

A travaillé parfaitement pour mon blog (botanique Amy).

0
BotanicalAmy

Pour une vidéo IFrame YouTube entièrement réactive, essayez ceci:

<div class="blogwidevideo">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.blogwidevideo {    
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;    
}

.blogwidevideo iframe {   
    left:10%; //centers for the 80% width - not needed if width is 100%
    top:0;
    height:80%; //change to 100% if going full width
    width:80%;
    position:absolute;
}
0
Stephen Kaufman

make iframe avec align = "middle" et le place dans un paragraphe avec style = "text-align: center":

<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>
0
Boris Gafurov
<div>
    <iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> . 
    </iframe>
</div>

<script>
    function myFunction() {
        var wscreen = window.innerWidth;
        var hscreen = window.innerHeight;

        document.getElementById("myFrame").width = wscreen ;
        document.getElementById("myFrame").height = hscreen ;
    }

    myFunction();

    window.addEventListener('resize', function(){ myFunction(); });
</script>

cela fonctionne sur Vimeo en ajoutant un identifiant myFrame à la iframe

0
user9734177