Video is vertically centered by default in column

I've inserted a Vimeo vid with the Video component. The component has added all sorts of code, including a sort of page within my page which includes its own <html> tag and <head> section, as well as a slew of css.

On placing the video inside a column div, my video is displayed as centered vertically. I could go overwriting some of the generated CSS, but I'm thinking there must be a simple way to bring my video up to the top of the column. Can anyone help?

Could the answer to this question be in this thread?

Thanks, Chris. I'll look into it.

This does make me wonder, though. The Bootstrap documentation provides some very simple code for adding embedded media, while BSS is adding all kinds of extra code. If I just add my video via a custom code component and go the standard Bootstrap route, will I be missing out on something? In other words, what is all that extra BSS code doing?

I don’t think you will be missing out f you did custom code - but what is the code that’s being added extra within the app? Am curious to see what you get vs what you are expecting

Ah, wait. It seems that my Webkit inspector is showing me all sorts of weird added code, but a straight View Source is giving me the expected, much more reasonable html.

However, the Inspector is showing #document inside of the iframe, and inside of this is a complete web page, with its own <html> and <head> tags. When I use Inspect Element on the embedded video, much of the associated CSS is actually from the elements inside of this ghostly #document section, which makes it hard to know exactly where to go to change styling.

OK, so #document also appears when using a custom component, which now makes sense to me, because it is actually embedding a little mini webpage, right?

Still battling flexbox to get it to align properly…

A-ha! The


iframe> is contained in a div.col-x-x, which itself is contained in a div.row…that is set to display:flex! The problem is solved by selecting the row in BSS and then in the options palette setting Align Items to Start. The embedded video is now aligned to the top of its enclosing div.

Chris, thanks for your help!