@Wilson1

Как правильно установить в блок фоновое видео?

Добрый день !
Подскажите как правильно вписать/установить в HTML шаблон (в блок) видео фоном.
В необходимом блоке есть фоновая картинка, поверх идёт текст.
Я хотел бы заменить картинку на зацикленный ролик (ролик есть, 5 сек), с Youtube не нужно.
Если просто устанавливаю ролик с нужными тегами -он просто отображается на сайте, но не вписан в необходимый блок.
Подскажите как правильно его внести....
Блок:
==========================================================================================
<section id="content-section-3">
					
                        <div class="gdlr-parallax-wrapper gdlr-background-image gdlr-show-all gdlr-skin-dark-skin" 
						id="gdlr-parallax-wrapper-2" data-bgspeed="0.1" 
						style="background-image: url('upload/pictures-bg.jpg'); padding-top: 100px; padding-bottom: 65px; ">
						
						 <div class="container">
                                <div class="gdlr-title-item" style="margin-bottom: 85px;">
                                    <div class="gdlr-item-title-wrapper gdlr-item  gdlr-center gdlr-large ">
                                        <div class="gdlr-item-title-container container">
                                            <div class="gdlr-item-title-head">
                                                <h3 class="gdlr-item-title gdlr-skin-title gdlr-skin-border">Текст поверх фонового видео</h3></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="one-fifth column">
                                    <div class="gdlr-item gdlr-price-item" style="margin-bottom: 55px;">
                                        <div class="price-item-image"><img src="upload/pic-1.png" alt="картинка" width="85" height="44" /></div>
                                        <h3 class="price-item-title">Нужен дельный совет ....</h3>
                                        <div class="price-item-price gdlr-skin-info">гитлер капут !</div>
                                    </div>
                                </div>
                               
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="clear"></div>
							
                    </section>		

--------------------------------------------------------------------------------------------------------------------------
Видео код:
----------------------------------------------------------------------------------------------------------------------------
<code lang="html">
 <video loop muted autoplay poster="video/rolik.mp4" class="fullscreen-bg__video">
                                  <source src="upload/rolik.mp4" type="video/mp4" padding-top: 100px; padding-bottom: 65px; >
        
                                    </video>
</code>


____________________________________________________________________________________________________
Спасибо !
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 1
HunteR-VRX
@HunteR-VRX
Помешанный на развитии
Тут решение кроется не в том каким образом сделать видеоряд фоном, а в типе позиционирования всех элементов (заголовки / абзацы / кнопки ) которые вы хотите видеть над этим видео. Все решается путем абсолютного позиционирования элементов:
К примеру
h1 {
color: #fff;
position: absolute;
top: 75px;
right: 100px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы