5

I added a custom image in the product view page gallery section. While clicking on the custom image section a popup will throw. On that popup, we can play a wistia video (refer to the attached screenshot).

enter image description here

Now the issue is, while close the popup the video not getting paused, it playing as usual.

My question is how can we pause the wistia video while closing the modal popup.

This is my popup video iframe code:

<div id="modal-overlay" style="display:none;">
        <iframe id="wistia-iframe"
                align="middle"
                type="text/html"
                width="100%"
                height="100%"
                src="<?= $iframeSrc ?>"
                frameborder="0"
                scrolling="no"
                allowfullscreen
                webkitallowfullscreen
                mozallowfullscreen
                oallowfullscreen
                msallowfullscreen>

        </iframe>
    </div>

The iframe src will look like "https://fast.wistia.net/embed/iframe/jf032xg69o?videoFoam=true&wmode=transparent"

I tried the below code to stop the playing video while closing the modal popup, but if I again open the modal popup it starts from starting point.

$('#modal-overlay').on('modalclosed', function() {
      $("#modal-overlay iframe").attr("src", $("#modal-overlay iframe").attr("src"));
});

I have tried the below solutions but I am not aware of "wistiaApi". Anyone give me suggestion to achieve this. Thanks in advance!

  1. https://stackoverflow.com/questions/27559651/play-a-wistia-video-with-a-button-with-jquery
  2. https://wistia.com/support/developers/player-api
Improve this question
4
  • My 2 cent solution is you kill the whole video element/iframe when closing the popup, no more video on the page
    – Jimmy
    Aug 16, 2021 at 7:14
  • @Jimmy If we kill the whole video element/iframe the video gets to stop but if we again click on the popup the video is playing from starting point. Instead of killing the video element, I need to pause the video while closing the popup. Please read the question properly. If you have any idea please provide the code, let me try it.
    – Siranjeevi K S
    Aug 16, 2021 at 8:27
  • the problem with your implementation is you are using iframe, which is restricted by browsers - meaning it's hard to control iframe element. You can switch it to video element, then you can do video.pause, that's much easier
    – Jimmy
    Aug 16, 2021 at 8:32
  • 1
    No, it is not possible to use the video element, because I am getting wistia video src URL as iframe src URL format, So iframe src is only possible in my case.
    – Siranjeevi K S
    Aug 16, 2021 at 8:49

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.