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
Hi 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).