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)?
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.
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!
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.
Here is the snippet I used http://codepen.io/pawelgrzybek/pen/WrNpJj which is a mp4 file rather then youtube
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.
No stupid questions Cloud, I’m no expert either
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.
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>