Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Runtu
0 / 0 / 0
Регистрация: 23.09.2015
Сообщений: 6
1

Video background

21.11.2016, 02:40. Просмотров 188. Ответов 0
Метки нет (Все метки)

Здравствуйте,
Подскажите пожалуйста, каким образом можно исправить такую проблему:
Секция с видео растягивается и на ее налазят следующие блоки,
блок с классом "about" должен отображаться после тега video :
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<header>
    <div class="background-wrap">
        <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
            <source src="video/video-bg.mp4" type="video/mp4">
        </video>
    </div>
 
    <div class="container">
        <div class="row">
            <div class="head-content">
                <a href="#" class="logo">Colorful <span>Flat</span></a>
                <span>The best open page template  for</span>
                <h1>Web Proffesionals</h1>
            </div>
        </div>
    </div>
 
    <form class="form-reg">
        <p><input name="nickname" type="text" placeholder="Full name"></p>
        <p><input name="email" type="email" placeholder="E-mail"></p>
        <p><input name="phone" type="tel" placeholder="Phone"></p>
        <p><input name="phone" type="button" value="Get Started Now!" class="button"></p>
    </form>
</header>
 
    <div class="about">
        <div class="container">
            <div class="row">
                <h2>About Us</h2>
                <span>Lorem ipsum dolor sit amet, cetero temporibus ex nec. Et facilisis definiebas est, nec et autem impetus oportere, vim te exerci noster omnium. Habeo dicam vim at, sale possit nostrum et pro.</span>
                <div class="col-md-6">
                    
                </div>
                <div class="col-md-6">
                    
                </div>
            </div>
        </div>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
#video-bg-elem {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -100;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
}
 
.head-content {
  position: relative;
  top: 80px;
  z-index: 3;
  color: #fff;
  text-align: center;
}
 
.head-content .logo {
  font-size: 56px;
  line-height: 40px;
  color: #fff;
  font-family: Lato Black, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 100px;
}
 
.head-content .logo span {
  font-weight: 200;
  font-family: Lato, sans-serif;
  font-size: 56px;
}
 
.head-content .logo:hover {
  text-decoration: none;
}
 
.head-content h1 {
  font-size: 112px;
  line-height: 90px;
  font-weight: 200;
  margin: 0;
}
 
.head-content span {
  font-size: 32px;
  line-height: 50px;
  margin: 0;
}
 
.form-reg {
  text-align: center;
  display: block;
  padding: 20px;
  width: 365px;
  margin-top: 145px;
  position: relative;
  background-color: #dbdbda;
  border-radius: 3px;
}
 
.form-reg input {
  width: 100%;
  padding: 5px;
}
 
.form-reg .button {
  background-color: #5dbdfe;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  padding: 5px 10px;
  box-shadow: 3px 3px 1px rgba(50, 50, 50, 0.75);
  border-radius: 2px;
}
 
.about {
  position: relative;
}
.background-wrap { position:relative;} - задавал, видео обрезанное становится.
Буду благодарен любому совету, ссылке.
0
Миниатюры
Video background   Video background  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.11.2016, 02:40
Ответы с готовыми решениями:

Background-color: rgba() поверх <video>
При изменении ширины страницы меняется высота тега &lt;video&gt; и расположение (top...

HTML <video> </video>, как проигрывать видео с компьютера?
У меня такая проблема: Делал html страницу, поставил тег &lt;video&gt; как надо, но...

Чем отличаются background-clip и background-origin?
Доброго времени суток! Объясните, пожалуйста, чем отличаются background-clip...

Работа с background-color,background-image
Добрый день ув. пользователи! Подскажите пожалуйста, можно как-то сделать, что...

Background и background-image
Добрый день ув. пользователи! Подскажите пожалуйста какие свойста в css...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.11.2016, 02:40

ТЭГ <VIDEO>
&lt;video width=&quot;320&quot; height=&quot;240&quot; controls=&quot;controls&quot;&gt; &lt;source src=&quot;&quot;...

Тег video
Прочитал что в хтмл5 появился новый тег video. Попробовал заюзать, не...

Video tag
Добрый день! Есть на сервере видео в формате mp4. Для его отображения решил...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru