Bug: Clicking play on a Vimeo video facade causes other facades on the page to break facade as well

Problem

This is really only noticeable on pages that have multiple videos. Nothing is broken and the video players work fine, but just causes an odd experience.

Our CommonVideo component loads a facade over Vimeo videos, taking out some heavy client-side JS on page render. The video player doesn't actually load until it's clicked to play. Currently, if you click on a Vimeo facade, the video will load and play properly. If you scroll elsewhere on a page to another video, you will see that facade was broken as if someone clicked 'Play' on that as well. It does not cause the other videos to play.

Is there anything we can do to only break the facade of the specific element clicked through some unique identifier or index of the video on the page?

Pages

I'm sure this happens on other pages where there are multiple videos. Not noticeable if modals are used. These are the two biggest examples:

• https://about.gitlab.com/releases/whats-new/
• https://about.gitlab.com/get-started/

Engineering notes

• components/common/Video.vue
• Ensure that the dataLayer events around this functionality still fire properly (load, play, and pause) if a solution is merged