Answer the question
In order to leave comments, you need to log in
How to properly set a background video in a block?
Good afternoon !
Tell me how to properly insert / set the HTML template (in the block) with a video background.
The required block has a background image, with text on top.
I would like to replace the picture with a looped video (there is a video, 5 seconds), it is not necessary from Youtube.
If I just install a video with the necessary tags, it is simply displayed on the site, but is not included in the required block.
Please tell me how to put it in...
Block:
====================================== ================================================= =
<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 the question
In order to leave comments, you need to log in
Here the solution lies not in how to make the video sequence a background, but in the type of positioning of all elements (headings / paragraphs / buttons) that you want to see above this video. Everything is solved by absolute positioning of elements:
For example
h1 {
color: #fff;
position: absolute;
top: 75px;
right: 100px;
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question