Brightcove Smart Player not showing video on iPad and iPhone if it's in a modal ( Hidden and Shown with Javascript )

Question

I'm working on a site that is supposed to launch next week. I'm struggling with an issue with the Brightcove smart player api on iPhone and iPad specifically if it's in a modal. I'm using a very simple custom skin setting the icons and colors in BEML. I'm using the player inline and in a modal. In both instances the player code is on the page by default. In the instance of the modal the container is hidden with CSS.

Here is my current code used for the modal:

<section class="fullscreen-container modal template-modal">
  <div class="fullscreen-interior fullscreen-interior-video">
    <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
      <object id="myExperience" class="BrightcoveExperience">
        <param name="bgcolor" value="#000000" />
        <param name="width" value="602" />
        <param name="height" value="451" />
        <param name="playerID" value="XXXXXXXXXXXX" />
        <param name="playerKey" value="XXXXXXXXXXXX" />
        <param name="isVid" value="true" />
        <param name="isUI" value="true" />
        <param name="dynamicStreaming" value="true" />
        <param name="includeAPI" value="true" />
        <param name="templateLoadHandler" value="onTemplateLoad" />
        <param name="templateReadyHandler" value="onTemplateReady" />
      </object>
      <script type="text/javascript">
      if(!Modernizr.touch) {
        brightcove.createExperiences();
      } else {
        $('.template-modal').addClass('template-modal-is-loading');
        brightcove.createExperiences();
      }
    </script>
    <script language="JavaScript" type="text/javascript">
      var player, modVP, expMod;
      function onTemplateLoad(experienceID) {
        player = brightcove.api.getExperience(experienceID);
      }
      function onTemplateReady() {
        modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
        if(Modernizr.touch) {
          setTimeout( function(){ 
             $('.template-modal-is-loading').removeClass('template-modal-is-loading'); 
          },500);
        }
      }
    </script> 
  </div>
  <button class="close-button">
    <span aria-hidden="true" data-icon="&#xe00e"></span>
  </button>
</section>

At first the player would not show up at all on the iPad. It would only show up on iPhone after rotating the device and changing orientation. After that the thumbnail would appear with the play button on top of it. Clicking the video thumbnail would play the video, it would take over the screen, and work play perfectly.

After inspecting the contents of the iframe that is being generated by the smart player on the iPad, it appeared that all the internal elements were set to 0x0. I then set a class on the container that will force it to be shown and then removed in the template ready handler.

  function onTemplateReady() {
    modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    $('.template-modal-is-loading').removeClass('template-modal-is-loading');
  }

After adding this code the smart player in the modal was no longer working on desktop. ( It would no longer load at all. The player would not appear. )

I then added the conditionals to check if Modernizr.touch is true. If so add the class to show the container. Load the player and once template ready fires remove the class to hide it again.

Now the player works again on desktop seamlessly both in the modal and embedded inline on a page.

On the iPhone it still won't show unless I rotate the device and playing the video no longer works at all. When clicking the thumbnail and play button the thumbnail is removed and the player remains black.

On the iPad when the modal now opens it shows the thumbnail and play button which it did not before. Now when pressing the thumbnail and play button the thumbnail disappears and you can hear the video playing but the player is completely black and now video is showing at all.

This is the code that is called then a modal is opened:

  waitForModVp = function () {
    if( typeof modVP == 'object' ) {
      modVP.loadVideoByReferenceID(newSrc);
      $(window).on('resize.size-video', function(){
        expMod = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
        var width = window.innerWidth*0.8,
        height = (window.innerWidth*0.8)*0.7491694352;
        if (width < 610) {
          expMod.setSize(width, height);
          $('.fullscreen-interior-video').css({
            'width' : width+'px',
            'height' : height+'px'
          });
        }
      })
      //For analytics
      //countViewUrl = ( evt.triggeredReference.closest('[data-countview-url]').attr('data-countview-url') );
      //$.get(countViewUrl);
    } else {
      window.setTimeout( waitForModVp, 250 );
    }
  }

Does anyone know how to resolve this issue or have any idea of what could be causing this?

Answer 1

According to Brightcove Known-Issues documentation:

If an HTML5 player is initially hidden (as in a lightbox implementation) attempts to play videos will fail silently. If the publisher intends to hide and show their lightbox multiple times, we recommend hiding it outside the viewport or covering it with another element instead of using display:none to avoid this issue.