Поместите мои видео в ту же строку

У меня проблема с этими 3-мя видео, мне нужно поместить ее в одну и ту же строку (горизонтально), но она появляется в вертикальном положении, я стараюсь отображать встроенный, стол и не работает, может мне помочь это? вот мой код:Поместите мои видео в ту же строку

http://jsfiddle.net/goz6L2no/

HTML

<p><div class="contenidovid"> 
<div class="video-wrapper"> 
    <iframe src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> 
</div> 

<div class="video-wrapper"> 
    <iframe src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> 
    </div> 

<div class="video-wrapper"> 
    <iframe src="http://www.youtube.com/embed/Zhawgd0REhA" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> 
    </div></div></p>

CSS

.contenidovid { 
    width: 100%; 
    max-width: 300px; 
    margin: 0 auto; 
    display: 
} 

.video-wrapper { 
    position: relative; 
    padding-bottom: 74.25%; /* 4:3 ratio */ 
    padding-top: 30px; /* IE6 workaround*/ 
    height: 0; 
    overflow: hidden; 
} 

.video-wrapper-narrow { 
    padding-bottom: 40%; 
} 

iframe,object,embed,video,.videoWrapper,.video-js { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.video-js, img.vjs-poster { 
    width: 100% !important; 
    height: 100% !important; //these need !important because IE wants to set height/width to 100px 
    max-width: 100%; 
}

источник

2015-01-23 Zycerk

Я бы попробовал использовать 'float'. – kgh

добавить 'display: inline-block;' to '.video-wrapper' –

Привет здесь обновляется jsfiddle enter link description here

Вам нужно сделать DIV float:left и сделать их width:30%, если они 3-х DIV я должен рассмотреть их можно разделить на 30-30-30 и 1-1-1, как margin's

Выполнение div float предотвратит использование dic, потребляющего все пространство, и предоставление им ширины в% обеспечит их изменение размера на основе размера экрана.

Надеюсь, что это поможет :)

источник

2015-01-23 19:06:06

Привет, спасибо Aadil! решена! – Zycerk

Я рад слышать, что Зикерк. Если это решило вашу проблему, вы можете пометить этот ответ как принятый ответ. Благодаря :) –

Используйте сочетание решений "видео-обертку", "встроенный блок" и ограничения ширины каждого из них. Также вам нужно установить «font-size: 0» на «contenidovid».

источник

2015-01-23 18:59:59 Shay

Поместите мои видео в ту же строку

ответ

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