Conflit With Astra Theme

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?

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/

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

Thank you. This Code Worked well.

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

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/

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?

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 3 months ago by hassadr.

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;
}

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

to center the play button you’ll need something like this;

  right: unset;
  left: calc(50% - 44px);
  top: calc(50% - 31px);

Thank you.