Possible to use a video instead of an image for Bootstrap Blocks background?

Blocks
1

Is it possible to use a looping .mp4 video instead of an image for the background of a Bootstrap Blocks header (For example, ‘Promo 1’ from the Library)?

2

Someone else may be able to help you with re-coding that block, but google “bootstrap snippets” and you will find various websites, this is a good way of learning how people create certain blocks.

For example, here https://codepen.io/ccrch/pen/GgPLVW

You can import these snippets and create your own blocks (if you have pro) or use them as a way to learn how blocks are made.

3

Well I wanted to see how this would be possible and after playing around with a few snippets, I’ve managed to get it working (sort of) for “promo 1”, although being honest I’m not sure how clean this is! I personally wouldn’t use it for a project, but have a look at my quick and dirty attempt!

http://jack-test.000webhostapp.com/

Works my end in chrome and opera but firefox doesn’t load the form fields, so would need to experiment further to have this working correctly.

4

Here is the snippet I used http://codepen.io/pawelgrzybek/pen/WrNpJj which is a mp4 file rather then youtube

5

Thanks Jack, for all the replies.

Last snippet absolutely brilliant.

Quick question: I understand the HTML and CSS bit (<div class=banner> for the block that I want to have the intro video in., and the css in the .css file for the entire page.), but where would I put the JS bit in (var intro= …)?

I’m new to Pinegrow/HTML in general, so apologies for all the stupid questions.

6

No stupid questions Cloud, I’m no expert either :grinning:

What I actually done was I exported the snippet as a zip file (bottom right hand corner) and the JS is saved via index.js, so you can copy/paste the JS file to your JS folder and then add the script to your footer in pinegrow.

        <script src="js/index.js"></script>
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="components/pg.blocks/js/plugins.js"></script>
        <script type="text/javascript" src="components/pg.blocks/js/bskit-scripts.js"></script>
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

I actually created a new section and added the “everything is awesome text/form fields” which is why I said it may not be clean, as need to tidy it all up, as I just wanted to see if I could get it working first, but the code for that block is:

<div class="banner min-height-500px">
    <div class="row">
        <div class="col-md-5 col-md-offset-1">
            <h2>Everything is awesome!</h2>
            <p class="white">Suspendisse ac pretium sapien, placerat lacinia enim. Fusce eu elit quis lacus cursus mollis. In feugiat diam id sem consectetur, id accumsan risus venenatis.</p>
            <form>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" placeholder="First name" class="form-control" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" placeholder="Last name" class="form-control" />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" placeholder="Email address" class="form-control" />
                </div>
                <a class="btn btn-primary btn-block">Register Now!</a>
            </form>
        </div>
        <!-- /.col -->
        <!-- /.col -->
    </div>
    pawelgrzybek.com
    <video autoplay="" loop="" muted="" class="banner__video" poster="https://pawelgrzybek.com/photos/2015-12-06-codepen.jpg">
        <source src="https://pawelgrzybek.com/photos/2015-12-06-codepen.webm" type="video/webm">
        <source src="https://pawelgrzybek.com/photos/2015-12-06-codepen.mp4" type="video/mp4">
    </video>
</div>