Comment puis-je centre Vidéo de Youtube (iframe) dans twitter bootstrap 3?

Salut, je suis en train de centre de l'iframe pour une vidéo de Youtube, Twitter Bootstrap 3, actuellement, il est aligné à gauche.

J'ai utilisé le code html suivant:

      <div class="embed-responsive embed-responsive-16by9">

      <iframe class="embed-responsive-item"  
       src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" 
       align="center" id="videothumbnail"></iframe>

       </div>

CSS:

    #videothumbnail{
    height: 50%;
    width: 50%;
    float: center;}
double possible de réduire la taille d'une vidéo Youtube en responsive largeur
ce n'est certainement pas un doublon de cette question. Cette question est en train de parler sur la façon d'utiliser les classes qui sont intégrées dans le Bootstrap de Twitter framework, Version 3.

OriginalL'auteur user3931756 | 2014-08-29

  1. 14

    De l'utilisation des classes col-xs-12 text-center. Vous n'avez pas besoin float:center;

    Donc changer cela:

    <div class="embed-responsive embed-responsive-16by9">

    à 

    <div class="embed-responsive embed-responsive-16by9 col-xs-12 text-center">
    Je pense que la classe que vous cherchez est un texte-centre centre pas de texte
    mise à jour, merci pour la sortir
    devrait être la marque comme la réponse correcte.

    OriginalL'auteur Dan

  2. 7

    J'ai pu le centre de mon incorporez-sensibles par limitrophe avec des mailles plus petites comme suit:

    <div class='row'>
    <div class='col-sm-2'></div>
    <div class='col-sm-8'>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen></iframe>
        </div>
    </div>
    <div class='col-sm-2'></div>
</div>
    Excellente solution! Il fonctionne pour moi!
    Vous pouvez ajouter la classe col-sm-offset-2 à votre centrée div au lieu d'avoir un vide avant.

    OriginalL'auteur Emeka

  3. 3

    Juste ajouter un centre balises

    <center>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"  id="videothumbnail" src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" align="center"></iframe>
</div>
</center>

    OriginalL'auteur Joshua Howard

  4. 2

    Si l'on travaille avec Bootstrap 4 vous pouvez utiliser l'offset. 

    <div class="col-sm-8 offset-md-2 embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" width="750" height="415" src="https://www.youtube.com/embed/{your-video}" frameborder="0" gesture="media" allowfullscreen>
</iframe>
</div>

    Ce qui limite les incorporer à 8 colonnes et garde de 2 colonnes de chaque côté de l'espace vide (soit un total de 12).

    OriginalL'auteur Dave

  5. 0

    envelopper l'iframe avec h(1-2-3...)

    <h4 class="text-center">   <iframe ....> </iframe>    </h4>
    Ne serait pas juste de la classe le texte aligner s'il est placé sur n'importe quel élément? Pourquoi est votre réponse mieux que les autres compte tenu de quelques années en arrière?

    OriginalL'auteur juan pablo

  6. -1
    <div class='row text-center'>


    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen>

        </iframe>
    </div>
</div>
    Bienvenue à Débordement de Pile! S'il vous plaît ajouter une explication de pourquoi ce code permet à l'OP. Cela aidera à fournir une réponse futurs téléspectateurs peuvent apprendre. Voir Réponse pour plus d'informations.

    OriginalL'auteur macs