videos in containers have controls displayed incorrectly

Hi Andy -

Thanks for reaching out to Support!

I took a look at your test page on both Chrome and Firefox but it appears that all the videos on the page look the same, the controls appear to be in place and working. I did go ahead and take a look at the page source and I see all the sections on the page have containers as shown below.

Do you maybe have a screenshot of the issue? Also is this happening on a specific browser or device?

If you ever have any other questions for us in the future please do not hesitate to ask!

I meant when the screen has been divided into two columns, then the video controls look messed up for me.  Single column sections are ok.  Previewing the page also looks ok.  Here's a screenshot on Chrome MacOS (zoomed to 33% to get everything in the shot, but looks the same at other zoom levels).  It looks the same on Chrome running on a ChromeOS Chromebook.  Something has got snarged for me.  I tried clearing the cache on WP Super Cache but that didn't help.

Here's a screenshot of https://niade.com/current-setup/ where you can see the same issue with the video controls on the right side.  This is a recent behaviour, things were fine with this display until quite recently.

Here's a view of the preview page for the above.  This is how it is supposed to look, with the video top aligned to the 'Aquarium' heading on the left and video controls that only appear upon hovering over video, instead of all the time.

Did something change?  The behaviour now is functioning as designed.  Maybe some temporary Dreamhost weirdness?  Thanks for investigating, but seems ok.  I'll report back if it goes sideways again.

Hi -

Thanks for getting back to us!

I'm glad to hear it! I was looking into this further and was having someone on apple devices take a look at things and it seemed to be working. I am not aware of any changes made on our end but I'm glad the issue was resolved! Let us know if it comes back and we can investigate further.

If you ever have any other questions for us in the future please do not hesitate to ask!

It's misbehaving again, on both Mac and Chromebook platforms. 

Solution: change Autoptimize plug-in setting from "Aggregate JS files" to "Do not aggregate but defer"

I have updated https://niade.com/test-page/ with screen-capture videos that demonstrate the problem.  Additional testing reveals the issue arises from a combination of Boldgrid content-shifting during loading made worse by having the Autoptimize plug-in active.  Without Autoptimize active, video content is initially loaded in the incorrect place, but jumps around and eventually lands in the correct place upon completion of the load.  With Autoptimize active the video content remains permanently in the initial incorrect position.

I note that the high degree of Cumulative Layout Shift even without Autoptimize is unattractive, and reportedly hurts SEO.