Video poster image not visible on my iPad

[acwolff]

I tested version 3.5.0 with a video test album, see the 7th and 8th thumbnail in this album.
If I click on such a thumbnailk on my iPad, I see a black empty box with a play button instead of the poster image.

The mp4 video file and the jpg poster image are both im my slides output directory.
I use the next code:

<a data-fancybox="S" href= "slides/IMG_0205.mp4" data-width="568" data-height="320" id="6" data-caption= ''>
 <img src="slides/IMG_0205.jpg" class="video" width="284" height="160" alt="" title="" />
 <span class='video-icon'><img src='res/video-icon.svg' alt='Video'></span>
</a>

My FancyBox init section contains:

video: {
	tpl:
		'<video class="fancybox-video" controls controlsList="nodownload">' +
		'<source src="{{src}}" type="{{format}}" />' +
		"Your browser doesn't support HTML5 video" +
		"</video>",
	format: "", // custom video format
	autoStart: false
},

What do I have to add / chnge to see the video poster on my iPad?

[fancyapps]

Why did you replace default template with the custom one? Check the default one, you will find poster="{{poster}}" attribute with placeholder that is replaced by thumbnail image source.

[acwolff]

I replaced the default template because I did not want an autoStart.

I replaced it now by your new template:

  video: {
tpl:
  '<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' +
  '<source src="{{src}}" type="{{format}}" />' +
  'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!' +
  "</video>",
format: "", // custom video format
autoStart: false
  },

but I still don't see a poster image.

[fancyapps]

Oops, it turns out that I somehow did not include all changes in the final code before publishing.
Please, update to the latest (v3.5.1), it should work fine - https://codepen.io/anon/pen/aRzXxz?editors=1010

[acwolff]

Yes, great!, now it works!

Thanks for your help!

BTW: is it requuired to copy the replace the whole default Video template just to set autoStart: false?
Or is there a shorter way to do that?

[fancyapps]

There is no need to pass whole object, you can do it simply like this:

$('[data-fancybox="S"]').fancybox({
  video: {
    autoStart: false
  }
});

You can try that easily here - https://codepen.io/anon/pen/aRzXxz?editors=1010