Заставить div расширяться, чтобы заполнить его содержимое?

#html #css

#HTML #css

Вопрос:

У меня есть видео, и я хочу, чтобы оно занимало 100% ширины, но когда я добавляю 100% в код css, поле расширяется (видео даже не растягивается), позволяя пользователям прокручивать по горизонтали.

CSS для моей веб-страницы;

 * {margin: 0; padding: 0;} //for html and body
 

// здесь размещается видео (id = трейлер)

 #screen1 {  
background: #07B63B;
}

#screen1 p {
padding-top: 200px;
}
 

// css трейлера в настоящее время

 #trailer {
position: relative;
top: 10px; 
width: 100%;
}
 

// html трейлера

 <video id="trailer" width="985" height="400" controls autoplay>
<!-- MP4 must be first for iPad! -->
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
</video> 
 

ПРИМЕЧАНИЕ * Вверху также есть белая полоса, на которую я помещаю логотип своих игр, который занимает довольно много высоты screen1, но это, конечно, не должно влиять на него, верно ?.

Я бы удалил, если бы смог центрировать логотип на видео, придав ему белый круглый фон с сильной непрозрачностью, чтобы выделить логотип.

ИЗОБРАЖЕНИЕ: http (точка с запятой) //prntscr.com/3wcazn

я был бы очень признателен за любую помощь!

Комментарии:

1. Трудно сказать, о чем вы спрашиваете, помог бы запущенный пример

2. Работает просто отлично: jsfiddle.net/bLT7J ? Похоже, это проблема с #screen1 and #screen1 p , вы дали им ширину?