Poster image not visible in Safari 14.0.2

[oligafner]

Expected behaviour

Plyr should show poster image on page load if data-poster is set.

Actual behaviour

Plyr shows black canvas instead of poster image even if data-poster is set.

Steps to reproduce

1. Open Safari 14.0.2 on macOS Big Sur 11.1 (20C69)
2. Go to plyr.io
3. Look at poster-less player

Environment

• Browser: Safari
• Version: 14.0.2 (16610.3.7.1.9)
• Operating System: macOS Big Sur
• Version: 11.1 (20C69)

Console errors (if any)

Link to where the bug is happening

plyr.io/

[sampotts]

Hey, I'm not seeing this on Safari 14.0.3 (16610.4.3.1.4). This is what I see on plyr.io unless it was fixed in another change 🤔

I can't test 14.0.2 as I'm on 11.2. Anyone else seeing this issue?

[oligafner]

I've tested on an older MacBook Pro 13" with the same software specs:
Browser: Safari
Version: 14.0.2 (16610.3.7.1.9)
Operating System: macOS Big Sur
Version: 11.1 (20C69)

Result:

Another test on a MacBook Air late 2010:
Browser: Safari
Version: 13.1.2 (13609.3.5.1.5)
Operating System: macOS High Sierra
Version: 10.13.6 (17G14042)

Result:

[andrxs]

Hey Guys, I have the same problem. If you want to replicate: Disable captions on demo.js
...
captions: {
active: false,
}

@sampotts

[gchtr]

I’m seeing the same result as @oligafner on https://plyr.io.

MacBook Pro (13-inch, 2019)

Browser: Safari
Version: 14.1.1 (15611.2.7.1.6)

Operating System: macOS Catalina
Version: 10.15.7

[erikt9]

I think this may be related to the order in which things load. At least for me, if I set preload="none" on the video element initially and then preload="metadata" a few seconds later, the poster would show up correctly (and metadata would still be fetched).

[starzou]

The same problem.

Browser: Safari
Version: 15.2 (16612.3.6.1.8, 16612)

[regiside]

I'm still seeing this issue. I also noticed if you simply add or remove the class "plyr--captions-active" on the plyr div, it makes the image appear or disappear.

[sampotts]

I'm still seeing this issue. I also noticed if you simply add or remove the class "plyr--captions-active" on the plyr div, it makes the image appear or disappear.

That’s likely because it forces Safari to redraw the UI. I’ll try and look at this but my current focus is getting the new player built (see pinned issue).

[regiside]

Okay thanks Sam, you're the man. It's so strange how you can toggle it on off using the captions button yet I'm not seeing anything in the css that would explain it. (I've also noticed I can set the z-index of the poster to 3 which makes it show up, but it covers the controls.) Looking into manually setting z-indexes for all elements as a workaround.

[regiside]

For anyone else having this issue it seems you can workaround it by simply giving video-wrapper a z-index of zero:
Add this to your css file:

/*workaround to fix safari bug with not showing video thumbnail:*/ .plyr__video-wrapper{z-index: 0;}

[ffxsam]

@regiside Thanks for this! It was a huge help.

PS: Safari is the worst.

[jackklink]

I am having this issue for only Vimeo videos and only in Safari as well. The z-index solution above is not working for me. I've also tried other things suggested in this thread with no luck. Any ideas?

Vimeo embed:
http://jackklink.com/video/698333331

YouTube embed:
http://jackklink.com/video/IoTDPkNQ5Kc

[regiside]

Hey @jackklink,
Not sure what version of safari you're using, but it looks like it's working correctly on 16.4.1 on Mac OSX.

[jackklink]

@regiside Hey sorry I forgot to update this! I figured it out...

The issue was within the Vimeo embed itself. For some reason, in Safari, when autoplay=1 is included on the embed link, Vimeo doesn't load its poster image at all, but in other browsers, it does. So even though the video is not actually autoplaying, the poster was not loaded in.

I use autoplay with Plyr because of the way my site works. I load up the player via javascript and want it to start playing right away without having to call an additional play command from the user click. (the user is clicking to load the player AND play it all in one) It's just the way I designed it a long time ago using Vue. Some day I'll find a better way to do this ha.

I found a workaround for now where I disable Plyr autoplay for when the user first arrives to the link and then enable it for all videos clicked from within the site after that when loading the poster image is unnecessary because the video starts playing immediately after the user clicks a thumbnail.