If I have two wistia videos embedded on a page, is there a way for me to stop/pause the current one playing when I click play on the other one?
The idea is I have a video playing (wistia embed) as a background with no sound or controls. When my custom "play" button is clicked, it pops up that same video in a separate popup embed I got from wistia. The issue is I want the background video to stop playing when the pop-up one is clicked.
This is my background video ...
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_inij4whj9t videoFoam=true" style="height:100%;width:100%">
</div>
</div>
This is my pop video..
<script src="https://fast.wistia.com/embed/medias/hez3u29kov.jsonp" async></script>
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<span class="wistia_embed wistia_async_hez3u29kov popover=true popoverContent=link" style="display:inline">
<a href="#" class="play-hero-video">
<img src="//air-watch.com/uploads/global-media/home-hero-pplay-icon-2x.png" onmouseover="this.src='//air-watch.com/uploads/global-media/[email protected]';" onmouseout="this.src='//air-watch.com/uploads/global-media/home-hero-pplay-icon-2x.png';" alt="">
<span>Play video</span>
</a>
</span>
Here's an example of how to do that on Glitch.