Video as header image, size issues.

[benrupp]

So I have been trying to figure out the optimal size/aspect ratio for a responsive header video and I am not happy with the results.  I am trying to make the entire video visible on the average laptop, but once I go to a desktop computer the video looks fine horisontally but gets cropped cropped top to bottom.  If I minimize the page it looks fine until it goes full screen then the cropping happens.  I have tried various sizes, and it either crops on the laptop or the desktop, I can't find a way to make it perfect on both.  Does anyone have a size recommendation?  Size below for reference.  if I could somehow constrain the size vertically that may acctually work?  So much of using weebly seems to be just shooting in the dark until you hit something,

Also make the video play on a cell phone already.

www.mkhmfg.com

[Adam7]

Welcome to Community, @benrupp. You could try adding spacers to the header section to force it to retain a certain vertical height. If you also use the Hide app you can then only have the spacers shown on specific screen sizes.

[PaulMathews]

@benrupp If you're using video as a section background then, yes, the video will be cropped to accommodate the video width within the section height. If you know the specific aspect ratio of the video and how to update the site css, you can certainly modify the height of the section container - in this case, banner-wrap - by making it a function of the section width. So, for example, if your video's aspect ratio is 16:9, you could set the height attribute of the banner-wrap section to be 56.25% (height = 9 / 16 * width = 0.5625 * width). The css is below. If your video banner only affects your home page, you can wrap this in style tags (<style> and </style> and place the code in the page SEO (in the Site Editor, Pages > SEO, then add the wrapped code to the Header code input box).

.banner-wrap, .banner-wrap .wsite-section-wrap {
  /* Set banner wrap (and contained section wrap) to a height related to the viewport width per the background video aspect ratio */
  height:56.25vw;
}