My vertical video embed is making my site's colors act buggy

I'm having an issue with the display of my website.

Certain site elements in the header of my site are not displaying with the color that they are set to have according to the theme. The most notable example is the drop down list that appears when hovering over elements in the menu. Instead of having the specially defined color for the theme, they will simply appear with the color that's set for the entire background.

My site isn't publicly available yet so I can't provide a link, only screenshots. Here are some examples:

The image above gives a clear example. According to the theme colors, the overlay should be orange, but instead it shows as blue.

After changing the color of the main background, it also changes the color of the background immediately.

I noticed that it will always pick the color of the first page in its category. If I select the first element in the dropdown menu, it appears like this:

Whereas if I select the second element, it appears like this:

While the background color for Bright 2 is set to:

So the yellow-ish color that it's using here, does not mean that suddenly it's applying the right color. Instead, it's just still applying the site background color from the 'Geinlijn' page.

I'm writing this post here after contacting the Squarespace support. They suggested me to talk about my issue here instead as it is more likely to receive the right kind of attention. They pointed out that the issue might be caused by my usage of custom embed blocks and they suggested me to switch to the default video embedder to solve this issue.

However, I'm using vertical videos as a conscious choice. The website is mostly meant for mobile devices, and so I want the videos to be displayed in vertical boxes to make the most use of mobile screenspace. The default method for embedding videos that Squarespace offers gives no option to change the dimensions of the frame. So I figured out a way to bypass this by following this thread:

I ended up adding another <div> around the <iframe> in order to align the video in the center, which means the whole block ends up looking like this:

<div style="text-align: center;">
<iframe width="315" height="560" src="https://www.youtube.com/embed/-2wUNHK_iIg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

This means the videos are now being displayed pretty much how I like it. That's good. However, it's causing these display issues on the site.

The person I was in contact with from support has submitted a feature request on my behalf for vertical videos to be added. And I guess that would be the best long-term solution for this issue.

In the meantime though, I'm hoping that maybe someone here can help me out in a less official but still practical solution? Although I don't really know what I'm asking for in this case. Perhaps some way to improve my video embed, so that it would be less intrusive on Squarespace's page template and doesn't cause things to break?

If that's not possible, then I will probably just accept the fact that embedding the videos in this manner has this effect on the site's style. And also hope that the Squarespace developers will find time and motivation to work on this feature soon. 

Thanks for your attention!