How to stop embed video in Model Popup in Javascript (WooCommerce)?

Question

UPDATED

I have used javascript to create a popup and it\'s working fine. The issue is that i am using iframe embed video code (Facebook) in the model. th

Answer 1

Without an API provided by the third party, in your case Facebook, there is no way to programmatically communicate through an iframe on a different domain. Therefor it would be easier to create and destroy the iframe when opening and closing the modals.

Remove the iframe from your HTML. Move the src of the iframe to a the modal element and store the value in a data attribute. This enables you to use the value of the attribute whenever you want when creating the iframe.

Trigger


  

  

    ✕
  

In your JavaScript create a function which constructs an iframe element with the src and attributes that you currently have in your HTML. This function has to be called whenever the modal is being opened. So it should be called in the onclick event handlers in the openModal function. Append the iframe to the modal__container element and open the modal.

Same goes for the closeModal function where your should remove the iframe element from the HTML to stop the video from playing in the background, which will solve your issue.

In combination with the creation of the iframe you now can start and stop your iframe video on opening and closing the modal.

/* This script supports IE9+ */
(function() {

  function createIframe(src) {
      if (typeof src !== 'string') {
          throw Error('src argument has to be a valid string');
      }
      var iframe = document.createElement('iframe');
      iframe.src = src;
      iframe.width = 560;
      iframe.height = 308;
      iframe.setAttribute('scrolling', 'no');
      iframe.setAttribute('frameBorder', 0);
      iframe.setAttribute('allowTransparency', 'true');
      iframe.setAttribute('allowFullscreen', 'true');
      iframe.style.border = 'none';
      iframe.style.overflow = 'hidden';
      return iframe;
  }

  /* Opening modal window function */
  function openModal() {
      /* Get trigger element */
      var modalTrigger = document.getElementsByClassName('jsModalTrigger');

      /* Set onclick event handler for all trigger elements */
      for(var i = 0; i < modalTrigger.length; i++) {
          modalTrigger[i].onclick = function() {
            var target = this.getAttribute('href').substr(1);
            var modalWindow = document.getElementById(target);
            var source = modalWindow.getAttribute('data-src');
            var iframe = createIframe(source);
            var modalContainer = this.lastElementChild;
            modalContainer.appendChild(iframe);
            modalWindow.classList ? modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open'; 
          }
      }   
  }

  function closeModal(){
    /* Get close button */
    var closeButton = document.getElementsByClassName('jsModalClose');
    var closeOverlay = document.getElementsByClassName('jsOverlay');

    /* Set onclick event handler for close buttons */
      for(var i = 0; i < closeButton.length; i++) {
        closeButton[i].onclick = function() {
          var modalContainer = this.parentNode;
          var modalWindow = modalContainer.parentNode;
          modalContainer.removeChild(modalContainer.firstElementChild);
          modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }
      }   

    /* Set onclick event handler for modal overlay */
      for(var i = 0; i < closeOverlay.length; i++) {
        closeOverlay[i].onclick = function() {
          var modalWindow = this.parentNode;
          
          modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }
      }  

  }

  /* Handling domready event IE9+ */
  function ready(fn) {
    if (document.readyState != 'loading'){
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }

  /* Triggering modal window function after dom ready */
  ready(openModal);
  ready(closeModal);
}());

Now your WooCommerce video field is already good, but maybe it's a good idea to indicate that the src of the iframe is needed as value instead of the a complete