Video Background

Developers
1

Hey all,

I’m trying to create a module with video as a background and am having trouble grabbing the video source. I’ve looked at the builder plugin modules to see what I can replicate, but I think I’m over-complicating things. Here is a piece of the code I have:

        <video class="background-video" loop muted autoplay poster="<?php echo $settings->bg_video_fallback_src; ?>">
            <source src="<?php echo $settings->bg_video_webm; ?>" type="video/webm">
            <source src="<?php echo $settings->bg_video; ?>" type="video/mp4">
        </video>

Would it be possible to be pointed in the right direction? Thanks as always.

2

Hey Desmond,

We’re releasing an update today that adds WebM support to the video module. Would that solve your needs here?

Regardless, you should be able to get the URL for a video file using…

$bg_video_data = FLBuilderPhoto::get_attachment_data($settings->bg_video);
$bg_video_webm_data = FLBuilderPhoto::get_attachment_data($settings->bg_video_webm);

echo $bg_video_data->url;
echo $bg_video_webm_data->url;

Let me know if you have any questions about that.

Justin

3

Hey Justin,

That code worked perfect - awesome.

I’m actually working on a layout that has an absolutely positioned arrow at the bottom of a full-height video background row (when you click the arrow, it should move to the next row).

Unfortunately because of the css positioning involved with the video background in a row, I have to create my own version of that video background row using different code via a module – otherwise the absolutely positioned arrow that is supposed to be at the bottom of the row just stays within the row’s column at about half-way down (thats a mouth-full!).

Looks like it is working with that code though!

That is probably the only real struggle I’m having with BB – which is using custom css that positions objects absolutely. It would be great to be able to create a column, and then choose whether it is aligned top, middle, or bottom of that row.

Looking forward to the update.

  • Desmond
4

Hey Desmond,

I’m glad to hear it’s working! I have done that exact layout before and was able to achieve it with only the builder and some custom CSS. If you end up doing another one, shoot me a link and I can help you work through it.

Justin

5

Hey Justin,

I might actually take you up on your offer since I think using BB’s built in full-height / video background would make more sense long-term.

I’m working locally so I don’t have a link :frowning: , But essentially this is all I need to do:

  1. Row: Full-height with a video background
  2. Column within that row: Insert a module (image, html, or icon – whichever makes sense) and have it bottom / center aligned.

Thats really it. I’ve got it working with full-height image rows, but video rows are giving me issues.

Got a quick snippet of css I could use ;)?

6

Hey Desmond,

Sure thing! I don’t have a snippet on hand, I need to fish that out of a site I did, but can get something over to you. Today’s a bit tight, but I should have it by Sunday/Monday.

Justin

7

Hey Desmond,

Here you go…

#my-row {
	position: relative;
}
#my-module {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 50px;
}

Give the row containing your module an ID of my-row and your module an ID of my-module (change those if you would like).

You may want to adjust the bottom value in the CSS to fit your design.

Let me know if you have any questions about that.

Justin

8

Hi Justin,

Thanks for getting back to me. I actually tried that same approach and it appears that something when combining full-height + video is causing the difficulty. Basically the module stays relative to the centered column, rather than the containing row.

So using your code, the module is 50px from the bottom of the containing column, not the row. There must be something obvious I’m overlooking…

Full-height image backgrounds are no problem. I’ve been using the following SASS mixin with great success in other rows.

@mixin center($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

If you can think of anything just let me know!

Thanks as always.

  • Desmond
9

Hey Desmond,

Sorry, I wasn’t testing with a video bg :slight_smile: My bad! This CSS should work…

#my-row {
	position: relative;
}
#my-row.fl-row-bg-video .fl-row-content {
	position: static;
}
#my-row.fl-row-bg-video .fl-module {
	position: relative;
}
#my-row.fl-row-bg-video #my-module.fl-module {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

Let me know.

Justin

10

Perfect. Thanks man, much appreciated.

11

You bet!