0

I have an absolutely positioned background video that's been "cropped" - meaning the top and bottom 20% or so is hidden.

Here's a link to what I've built (hero area): http://pchapman-sandbox.dev.vuforia.com/vuforia-landing/

In the center of this video, at several points it shows a phone, with important video content in the phone. I need that phone to stay centered within this cropped area.

Problem: currently I've written 7 media queries with a mild transition. However, at various widths the centering is off and it's a clunky solution.

The height of the "cropping" area ranges from 420px to 460px The current control on <video>, starts thus: 

    top: -35vh; 

    @media screen and (min-width: 2000px) and (max-width: 2400px) {
       top: -31vh !important;
       transition: top 2s ease-in;
     }

     // multiple media queries down to...

     @media screen and (max-width: 980px) {
       top: 0 !important;
       transition: top 2s ease-in;
     }

I would love the option of a calc() function; to calculate the top value based on the width of the browser. I've checked a bunch of links including controlling padding via height and looked at SASS Poly Fluid Sizing but I can't make anything work and am fast reaching frustration point. Pluse,I don't think I understand calc() so well, what values go where.

Is this the right approach? Should I use something else instead? I'd prefer a CSS solution if possible.

Thank you for any help!

Peter Chapman
  • 3
  • 2
  • Please add a [mcve]. – Kosh Jan 12 '19 at 03:34
  • I have tried to be as concise as possible, with also supplying a link, with which someone could look at the live code. I want to respect the time someone takes to look at my issue, to make it as quick and easy as possible, however this request for _Minimal, Complete & Verifiable_ is baffling me. Maybe this will help: I have a solution that's clunky (7 media queries); I would love to figure out a `calc()` function that would do that work. I hope this helps. – Peter Chapman Jan 13 '19 at 05:57

0 Answers0