[Video] Combination of videos will cause one video to not play while alternate video sound is heard

Detailed description

Describe in detail the issue you’re having.

This is an issue that occurs when combining a couple of types of videos. (This issue has been discovered on AEM pages which can use Video CTA links, Video CTA cards, Inline Video containers and Video containers that play in a lightbox.). When a page contains both a Video CTA Container to handle video CTAs and also a Lightbox Video Player Container to handle videos that play in the lightbox, and clicking between 2 video ctas, the following error will occur where one video displays in the lightbox, but the other video is also heard playing.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Videos

What did you expect to happen? What happened instead? What would you like to see changed?

When clicking on a video CTA only a single proper video plays in a lightbox.

What browser are you working in?

Chrome, Firefox

What version of Carbon for IBM.com are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

AEM

Steps to reproduce the issue

Here’s a sample of markup that can be added to storybook to reproduce this error. This markup is a reduced version of what is rendered on an AEM page which can container multiple types of videos:

<!-- This CTA container handles click on CTA Video links -->
<dds-video-cta-container>
     <!--  This Lightbox container will handle videos configured to play in a lightbox -->
      <dds-lightbox-video-player-container></dds-lightbox-video-player-container>
      <dds-video-player-container video-id="1_9h94wo6b" aspect-ratio="4x3" playing-mode="lightbox"></dds-video-player-container>
     <!-- Video A -->
      <dds-text-cta cta-type="video" href="1_9h94wo6b"></dds-text-cta>
     <!-- Video B -->
      <dds-text-cta cta-type="video" href="1_w5drm2rz"></dds-text-cta>
<dds-video-cta-container>

1. Click on Video A
2. Allow the lightbox and video to render and start playing.
3. Close the lightbox before the video finishes
4. Click on Video B
5. Allow the lightbox and video to render.
6. Close the lightbox before the video finishes
7. Click on Video A again

Now the lightbox will display Video B, put the audio from Video A can be heard.

[ccwilson-us-ibm-com]

Yes.

[shixiedesign]

Hey @ccwilson-us-ibm-com checking to see if this issue is resolved? Thank you!