video.js and fancybox - video plays automatically on fancybox open

Question

I am using fancy box to open an html snippet that includes a video.js player.

My problem is the player autoplays when it is opened in a lightbox, something about the initialization of the lightbox is triggering the video to play. I don't want the video to autoplay, I want the lightbox to open and it show the video normally, with the play button over the poster image chosen. The video loads normally and doesn't autoplay when the same code is used outside of the lightbox.

I am developing using jekyll and in chrome.

Here is my html snippet that is opened in a lightbox:

<div style="display: none" class="video-lightbox" id="acwedding">
  <div class="lb-vid-content">
    <div class="lb-vid">
      <video
        class="video-js vjs-big-play-centered vjs-16-9"
        controls
        preload="auto"
        poster="posters/acwedding.jpg"
        data-setup='{}'>
        <source src="https://player.vimeo.com/external/248666889.hd.mp4?s=efe468ee4ee8ae545fa9cf0a8a985788bb4409d9&profile_id=175" type="video/mp4"></source>
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
      </video>
    </div>
    <div class="lb-vid-desc">
      <h2 class="lb-vid-title">Chris and Allison's Wedding Video</h2>
    </div>
  </div>
</div>

I'm not too experienced with javaScript but I suspect I can do something to delay initialization of the video.js player until the lightbox is opened. But I'm not sure how to do that nor if it is even the right thing to do. I appreciate any help!

Answer 1

It appears there is a play() trigger in fancybox that is causing the video.js player to play. I simply deleted this trigger from the fancybox code and so far so good! Probably not an ideal solution as its a little quick and dirty but so far for my purposes it's doing the job.

If you are experiencing the same issue and like to use my fix, search the fancybox js file for '.trigger("play")' and delete it. I'll update if any issues arise from this fix.