#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
, вы дали им ширину?