2

I am using Wista to embed a video in my website. This works in all the regular browsers but in mobile safari clicking the play button opens what I am guessing is the html5 video player. Because of this my exitVideo function is never activated as the player has its own done button. Does anyone know how to capture this click event? All i really need is a function that turns fullScreenVideo.playingVideo to false when a user closes the video.

html

<div id="movie-section">
    <div id="video_container">
      <div class="fade-video"></div>
      <div id="video-tag">
        <div class="video-text">
          <h3>We would love to tell you about us.</h3>
          <h2>Checkout our intro <span class="blue">video<span></h2>
        </div>
        <img id="play-btn" src="i/graphic_play-button.svg">
      </div>

      <div id="wistia_8hq5abfi3l" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
    </div>
    <div id="wistia_7j06z458qu" class="wistia_embed overlayVideo" style="width:920px;height:518px;"></div>
    <div id="ex"><img src="i/ex.svg" width="23" height="23" /></div>
  </div>

Javascript

var fullScreenVideo = fullScreenVideo || {};

fullScreenVideo = {
    name: 'fullScreenVideo',

    backgroundvideo: '8hq5abfi3l',
    backgroundVideoDiv: document.getElementById("wistia_8hq5abfi3l"),
    overlayVideo: '7j06z458qu',
    overlayVideoDiv: document.getElementById("wistia_7j06z458qu"),
    textDiv: document.getElementById("play-btn"),
    movieBackground: document.getElementById("movie-background"),
    movieSection: document.getElementById('movie-section'),
    videoContainer: document.getElementById("video_container"),
    ex: document.getElementById('ex'),
    playingVideo: false,
    width: null,
    height: null,

    embedVideo: function()
    {
      var videoOptions = {};

      Wistia.obj.merge(videoOptions, {
        plugin: {
          cropFill: {
            src: "//fast.wistia.com/labs/crop-fill/plugin.js"
          }
        }
      });

      wistiaEmbed = Wistia.embed(fullScreenVideo.backgroundvideo, videoOptions);
      overlayEmbed = Wistia.embed(fullScreenVideo.overlayVideo, videoOptions);

      /**
       * We load the thumbnail in the background while we wait
       * for the video to load and play. Once loaded, we pause, reset to 
       * frame zero, show the video then play it.
       */
      wistiaEmbed.bind("play", function(){
        wistiaEmbed.pause();
        wistiaEmbed.time(0);
        fullScreenVideo.backgroundVideoDiv.style.visibility='visible';
        wistiaEmbed.play();
        return this.unbind;
      });

    },

    playVideo: function()
    {

      fullScreenVideo.playingVideo = true;

      if(window.innerWidth < 650 && Modernizr.orientation){
        overlayEmbed.play();
      } else {
        fullScreenVideo.movieBackground.setAttribute('style', 'visibility: visible;');
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+fullScreenVideo.width+'px; height: '+fullScreenVideo.height+'px;');
        fullScreenVideo.overlayVideoDiv.setAttribute('style', 'left: 0px; visibility: visible;');
        fullScreenVideo.ex.setAttribute('style', 'right: 24px');
        fullScreenVideo.textDiv.style.opacity='0';
        overlayEmbed.plugin.cropFill.resize();
        overlayEmbed.play();
        fullScreenVideo.disableScroll();
      }

      overlayEmbed.bind("end", function () {
        fullScreenVideo.exitVideo();   
      });

    },

    exitVideo: function()
    {
      fullScreenVideo.playingVideo = false;
        fullScreenVideo.movieBackground.setAttribute('style', 'visibility: hidden;');
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+fullScreenVideo.width+'px; height: 320px;');
        fullScreenVideo.overlayVideoDiv.setAttribute('style', 'left: -3000px; visibility: hidden;');
        fullScreenVideo.ex.setAttribute('style', 'right: -3000px');
        fullScreenVideo.textDiv.style.opacity='1';
        overlayEmbed.pause();

        overlayEmbed._keyBindingsActive = false;
        overlayEmbed.time(0);
        fullScreenVideo.enableScroll();
        fullScreenVideo.fixTextPosition();
    },

    fixTextPosition: function()
    {
      var width = document.documentElement.clientWidth;
      var height = window.innerHeight;

      if(fullScreenVideo.playingVideo === true ){ //&& window.innerWidth > 650) {
        overlayEmbed.plugin.cropFill.resize();
        fullScreenVideo.videoContainer.setAttribute('style', 'width: '+width+'px; height: '+height+'px;');
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+width+'px; height: '+height+'px;');
      } else{
        fullScreenVideo.movieSection.setAttribute('style', 'width: '+width+'px;');
        fullScreenVideo.videoContainer.setAttribute('style', 'width: '+width+'px;');
      };


      fullScreenVideo.overlayVideoDiv.style.width=width+'px';
      fullScreenVideo.overlayVideoDiv.style.height=height+'px';

      fullScreenVideo.width = width;
      fullScreenVideo.height = height;

    },

    disableScroll: function() {
      document.body.style.overflow='hidden';
    },

    enableScroll: function() {
      document.body.style.overflow='auto';
    }
}

 xui.ready(function() { 
  fullScreenVideo.fixTextPosition();
  fullScreenVideo.embedVideo();
 });

window.addEventListener('resize', fullScreenVideo.fixTextPosition);
x$("#play-btn").on('click', fullScreenVideo.playVideo);
x$("#ex").on('click', fullScreenVideo.exitVideo);
ReganPerkins
  • 1,645
  • 3
  • 17
  • 36

0 Answers0