Как сделать центр Youtube Video (iframe) в twitter bootstrap 3?

Привет Я пытаюсь центрировать iframe для видео Youtube в Twitter Boostrap 3, в настоящее время он выровнен по левому краю.Как сделать центр Youtube Video (iframe) в twitter bootstrap 3?

Я использовал следующий HTML:

 <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;}

источник

2014-08-29 user3931756

Возможный дубликат [Shrink a Youtube video to responsive width] (http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – davidcondrey

@dcc это определенно не дублировать этот вопрос. Этот вопрос говорит о том, как использовать классы, встроенные в Bootstrap из платформы Twitter, версия 3. – wuliwong

Используйте классы col-xs-12 text-center. Вам не нужно float:center;

Так это изменить:

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

<div class="embed-responsive embed-responsive-16by9 col-xs-12 text-center">

источник

2014-08-29 02:52:33 Dan

Я думаю, что класс, который вы ищете, это текстовый центр, а не центр текста – etoisarobot

@DKMulligan обновлен, спасибо, что указали его – Dan

Просто добавь тег центра

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

источник

2014-08-29 03:18:54

я был в состоянии сосредоточить свое встраивание реагирующим на граничащих с такими сетками меньшего размера:

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

источник

2015-02-28 23:03:54 Emeka

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

источник

2016-07-29 13:59:33 macs

Добро пожаловать в переполнение стека! Пожалуйста, добавьте некоторое объяснение, почему этот код помогает OP. Это поможет обеспечить ответ, о котором могут узнать будущие зрители. См. [Ответ] для получения дополнительной информации. –

При работе с Bootstrap 4 вы можете использовать смещение.

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

Это ограничивает встраивание в 8 столбцов и сохраняет 2 столбца с обеих сторон пустым (всего 12).

источник

2017-11-26 03:43:41 Dave

Как сделать центр Youtube Video (iframe) в twitter bootstrap 3?

ответ

Смежные вопросы