Video Backgrounds

Support
#1

I have been searching the forum to learn about using video as the background of a section. I can see that there is a lot of discussion, much of it a bit old and sometimes contentious…
Is it possible to make video appear full-width in a section? If so how do you do it? I am not concerned about perfect fit top and bottom. I just want it to bleed left and right. It also does not have to be a background image. It could be in any kind of html container as long as it is full-width on screen.
Thanks.

#2

Hello @johnboak,

Thanks for writing in!
Please check out this video demos first:

Kindly let us know how it goes.

#3

Hi Ruenel; The video that you sent is useful. But it’s purpose is only to remind you to place a poster image so that mobile displays something. But do you have anything that explains how to control the display of the video?
I have a video background placed in this page: https://yamoransamodel.org/vidback/
(It is not the actual video, I am still waiting to receive from the client. But it is useful for learning how to do this.) The YouTube link is placed in the lower background of the Section div using the Cornerstone interface.
I would like the video to fill the entire section background. I have fiddled with the padding specs, and have had no luck yet in making it goes to the edges of div.
How does one make a background video bleed on all four sides?
Thanks

#4

I did this by containing it in a div within a div… then setting the wrap div to flex center and the video bg div to be min-width of 1200px (this worked for my use case, but you could set it bigger.

#5
  1. Which div is the wrap? A section?
  2. Where is the specification opportunity for “flex” to be found in the interface?
  3. What should the “video bg div” be: a row, a column, anything else?
    I would love to try out your idea, but I need a little more detail if you can provide it.
#6

Hello @johnboak,

You can insert a DIV element inside your Column element. You can then insert the video background on the DIV element.

The Flex option can be found in the element settings Design section.

Screen Shot 2022-10-13 at 4.52.57 AM
Screen Shot 2022-10-13 at 4.52.57 AM652×1200 47.3 KB

Having the background video in a section should make the video bleed to the top, bottom, right and left sides or will totally fill the whole section. Please provide us the URL of the page where you have inserted your video background so that we can inspect it.

Best Regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.