Conflit With Astra Theme

Resolved hassadr
(@hassadr)

1 year, 10 months ago
I recently switched from the Jannah theme to the Astra theme on my WordPress site. Since making this change, I’ve encountered an issue where the WP YouTube Lyte plugin is no longer functioning as expected. Previously, the plugin worked perfectly with the Jannah theme, displaying videos with the LYTE mask as intended.

<a href=”https://ibb.co/09X5j9W “>https://ibb.co/09X5j9W
https://ibb.co/kcy3kkX

Here are the specifics of the issue:
- Plugin Version: [1.7.23 ]
- Theme Version: Astra (latest version)
- Problem Description: Videos are no longer being displayed with the LYTE mask. Despite emptying the cache for both the plugin and the entire page, the issue persists. No JavaScript errors are visible in the console, and I’ve checked that both the plugin and theme are updated to their latest versions.

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

Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 10 months ago

did a quick test on a test-site and LYTE & Astra do seem to work for me, see e.g. https://futttakinstatest.kinsta.cloud/lyte-test-for-androgenicalopecia/

can you share the URL of a page on your site where I could see things broken?

Thread Starter hassadr
(@hassadr)

1 year, 10 months ago

Hi @optimizingmatters,

I’m using Astra theme with Elemontor Pro.

Here an example where I got this issue: https://www.dztechy.com/simplify-phone-get-back-basics/
Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 10 months ago
OK, a CSS conflict issue indeed, below CSS (add it via Appearance -> Customize -> Extra CSS) should fix that;
```
.ast-oembed-container .lyte-wrapper {
  width: 100% !important;
}

.ast-oembed-container .lyte-wrapper .play {
  width: 88px;
  height: 63px;
  position: absolute;
  right: unset;
  left: calc(50% - 44px);
  top: calc(50% - 31px);
}
```
hope this helps,
frank
Thread Starter hassadr
(@hassadr)

1 year, 10 months ago

Thank you. This Code Worked well.

Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 10 months ago

you’re welcome, feel free to leave a review of the plugin and support here! 🙂

Thread Starter hassadr
(@hassadr)

1 year, 9 months ago

Hi @optimizingmatters

I found that this solution not working on Phone. Please try this link: https://www.dztechy.com/things-to-consider-when-buying-mouse/

Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 9 months ago

I can’t reproduce that on my test-site hassadr, see https://futttakinstatest.kinsta.cloud/lyte-test-for-androgenicalopecia/ so likely a conflict with another plugin? try disabling (and re-enabling) plugins one at time to try to identify the culprit maybe?
Thread Starter hassadr
(@hassadr)

1 year, 9 months ago
Hi @optimizingmatters,

I’m having trouble playing YouTube videos on the mobile version of my site, even after disabling all plugins. It seems the issue might be related to how I’ve embedded the YouTube videos in my posts. I’m using the Classic Editor and simply pasting the video link. However, I discovered that changing the position from “absolute” to “static” in the following CSS code allowed the video to play:

body .ast-oembed-container * { position: absolute; top: 0; width: 100%; height: 100%; right: 0; }

Here a screenShot: https://ibb.co/PN6jv8q

Could this be causing the problem?
- This reply was modified 1 year, 9 months ago by hassadr.
Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 9 months ago
could be, try changing the first block of the custom CSS from my older reply maybe;
```
.ast-oembed-container .lyte-wrapper {
  position: absolute !important;
  width: 100% !important;
}
```
Thread Starter hassadr
(@hassadr)

1 year, 9 months ago

Hi @optimizingmatters

This code didn’t work. Could You please share with me the Plugin Settings that you are using.

I used this code:

.ast-oembed-container .lyte-wrapper .play {
width: 88px;
height: 63px;
position: absolute;
top: 50%;
transform: translate(-100%, -50%);
z-index: 2; /* Ensure the play button appears on top of the video */
}

.ast-oembed-container .lyte-wrapper .pL {
position: relative;
z-index: 1; /* Ensure the video stays below the play button */
}

But I found that the Play Button didn’t Center on Desktop (It’s good on Phone). https://prnt.sc/vFDurjo7pj9p
Plugin Author Optimizing Matters
(@optimizingmatters)

1 year, 9 months ago
to center the play button you’ll need something like this;
```
  right: unset;
  left: calc(50% - 44px);
  top: calc(50% - 31px);
```
Thread Starter hassadr
(@hassadr)

1 year, 9 months ago

Thank you.

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

The topic ‘Conflit With Astra Theme’ is closed to new replies.