CSS variables not defined

  • Resolved Jesse Fisher

    (@jessejfisher)


    5 months, 2 weeks ago

    The default CSS for the button alignment says –aspect-ratio-height and -aspect-ratio-width are not defined, and the play button sits at the top of the image. I’m using a Vimeo video with a custom thumbnail and have checked on multiple browsers.

    top: calc(((var(--aspect-ratio-height) / var(--aspect-ratio-width))* 50cqw) -(0.5* var(--hd-play-button-size)));

    Have you considered this simpler approach? The transform property moves the element back up by 50% of its own height and left by 50% of its own width.

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Mark Wilkinson

    (@wpmarkuk)

    Could you provide the URL to where this is happening please?

    Thread Starter Jesse Fisher

    (@jessejfisher)

    Here you go https://qualitashealth.com.au/bcve/. These do not have a custom thumbnail, but it shows the issue.

    With further testing, I think the problem is the unique aspect ratios of the uploaded videos.

    • Video 1: no classes are generated for the embed.
    • Video 2: “wp-embed-aspect-16-9 wp-has-aspect-ratio” classes are generated.
    • Video 3: “wp-embed-aspect-1-1 wp-has-aspect-ratio” classes are generated.
    Plugin Contributor Mark Wilkinson

    (@wpmarkuk)

    Thanks for posting those. I have a fix now which is along the lines you have suggested above. I will release an update to the plugin shortly.

    Plugin Contributor Mark Wilkinson

    (@wpmarkuk)

    The update to version 1.3.6 is now released, including this fix.

    Thread Starter Jesse Fisher

    (@jessejfisher)

    Awesome! Thanks for the quick turn around Mark!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.