Our 2nd Tier team has debugged this issue a bit further and we highly think this is a possible bug in Chrome in Desktop.
This works fine in other browsers and if we use the browser dev tools to inspect the DOM and styling, there is nothing that can explain the position of the video at the top of the screen. When you examine the style attributes of the relevant area of the DOM, the iframe is absolutely positioned with top=bottom=left=right=0, which means that it should occupy the space of the container div. That is what happens in other browsers, but not in Chrome.
In other browsers we can make updates to the style rules to move the position of the video, but the same doesn’t work in Chrome, the position of the video is not determined by the style rules applied and cannot be moved by making changes to them.
It appears the element containing the video with absolute positioning has lost track of its context somehow, and hence is positioned at the top left. Why might that happen?
We suspect this bug occurs because at the time the video is inserted it is hidden within a closed accordion and is not being displayed. But I run two different tests and that does not seem the issue:
- First, I made the content of the accordion appear by adding the class "open" to it. But the issue was still reproduced.
- Second, I placed the iframe, hardcoded, before the accordion and the issue was still reproduced.
Unfortunately, this is a very hard issue to reproduce. I tried to reproduce as minimally as possible, with only a few Javascript files that may be relevant, here hidden link
The issue is not reproduced.
I wanted to check if the issue will still be reproduced without Toolset plugins, but I can't deactivate Toolset Types, because the custom layout templates use some Toolset APIs(types_render_field, types_child_posts). Deactivating Toolset Types will cause fatal errors, but we can still adapt the code to reproduce the issue without Toolset plugins.
I digged a bit more into it and tried a youtube embed and I could narrow the issue down to this CSS rule that comes from this file hidden link
.bonus-listing, #lesson-homework ol {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
Once we deactivate this rules the embeds display as expected, check this screenshot hidden link
This being said, I suggest that you reach out to your child theme's developer, and/or to the vimeo support for assistance, I am sure one of them can help narrow this issue down and fix it for Chrome Desktop.
