Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Siteorigin hero video background not adjusting height dinamically
My page has a row with two columns: the left one with text and colored background and the right one with a blank hero widget with a video background. When resizing the window, the text column adjusts its height to fit the text, while maintain the (30%:70%) ratio of the row. However, the video background only occupies the “top and bottom padding” of 220px I configured, showing the background color on the bottom of the cell.
I think this could be solved by: 1) fixating the height of the entire row, forcing the video background to either resize inside the 220px padding or hiding when the screen is resized; or 2) dinamically changing the padding of the hero widget together with the height of the left cell, resizing the video background depending on the screen size.
I’m new to CSS so I failed in both attempts. Any suggestions?
I’m building the site locally, so I can’t give you a link to it, but here is a screenshot:
View post on imgur.com
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
1Hi Filipe Ailan Silveira
Unfortunately, resizing videos while avoiding the black bars is really ticky (you basically have to fight the CSS) which is why a lot of people use things like FitVids.js. Sadly, we don’t currently include FitVids.js support for the SiteOrigin Hero widget at this time. Consider using a Video
widget (like the SiteOrigin Video Player widget) and installing a generic FitVids.js WordPress plugin (as in, it honestly doesn’t matter what plugin you use).
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.