Title: CSS variables not defined
Last modified: June 12, 2024

---

# CSS variables not defined

 *  Resolved [Jesse Fisher](https://wordpress.org/support/users/jessejfisher/)
 * (@jessejfisher)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/css-variables-not-defined/)
 * 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.
 *     ```wp-block-code
       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.
 *     ```wp-block-code
       top: 50%;left: 50%;transform: translate(-50%, -50%);
       ```
   

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Contributor [Mark Wilkinson](https://wordpress.org/support/users/wpmarkuk/)
 * (@wpmarkuk)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/css-variables-not-defined/#post-17819063)
 * Could you provide the URL to where this is happening please?
 *  Thread Starter [Jesse Fisher](https://wordpress.org/support/users/jessejfisher/)
 * (@jessejfisher)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/css-variables-not-defined/#post-17819714)
 * Here you go [https://qualitashealth.com.au/bcve/](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](https://wordpress.org/support/users/wpmarkuk/)
 * (@wpmarkuk)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/css-variables-not-defined/#post-17819799)
 * 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](https://wordpress.org/support/users/wpmarkuk/)
 * (@wpmarkuk)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/css-variables-not-defined/#post-17819832)
 * The update to version 1.3.6 is now released, including this fix.
 *  Thread Starter [Jesse Fisher](https://wordpress.org/support/users/jessejfisher/)
 * (@jessejfisher)
 * [1 year, 11 months ago](https://wordpress.org/support/topic/css-variables-not-defined/#post-17821480)
 * Awesome! Thanks for the quick turn around Mark!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS variables not defined’ is closed to new replies.

 * ![](https://ps.w.org/better-core-video-embeds/assets/icon-256x256.jpg?rev=2824570)
 * [Better Core Video Embeds](https://wordpress.org/plugins/better-core-video-embeds/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/better-core-video-embeds/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/better-core-video-embeds/)
 * [Active Topics](https://wordpress.org/support/plugin/better-core-video-embeds/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/better-core-video-embeds/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/better-core-video-embeds/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Jesse Fisher](https://wordpress.org/support/users/jessejfisher/)
 * Last activity: [1 year, 11 months ago](https://wordpress.org/support/topic/css-variables-not-defined/#post-17821480)
 * Status: resolved