W
W
Wilson12019-03-24 03:59:03
HTML
Wilson1, 2019-03-24 03:59:03

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>

_________________________________________________________________________________________________
Thank you!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
ReActor Dmitry Vershansky, 2019-03-24
@HunteR-VRX

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 question

Ask a Question

731 491 924 answers to any question