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

Question

[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>

____________________________________________________________________________________________________
Спасибо !

Answer 1

[ReActor Дмитрий Вершанский]

Тут решение кроется не в том каким образом сделать видеоряд фоном, а в типе позиционирования всех элементов (заголовки / абзацы / кнопки ) которые вы хотите видеть над этим видео. Все решается путем абсолютного позиционирования элементов:
К примеру
h1 {
color: #fff;
position: absolute;
top: 75px;
right: 100px;
}

Comments

[Wilson1]

То что проблема (у меня) в правильно позиционировании - это я знаю. Если данное видео работает/отображается на сайте.
У меня проблема правильно вписать его на основании уже имеющегося блока.
В блоке есть фоновая картинка-> я её хочу заменить на видео.
Просто видео могу установить, а правильно его вписать уже в имеющийся на данный момент шаблон/блок-> что то никак .... (