CODEWITHSUNDEEP
javascripthtmlangulariframevimeo
JackKalish
JackKalish

Reputation: 1595

Vimeo iframe embed not autoplaying in Safari

Update 6/26/23: Strange - this suddenly started working for me on Safari, and I honestly have no idea why. Now when I visit a project page, the Vimeo video plays for me automatically no matter if I'm on Chrome or Safari. Not sure if maybe this was a fix that Vimeo recently implemented, or a change in the browser, or something I did...

I'm working on an Angular site, it's a SPA that has routes for different project pages. Each project page has a Vimeo video iframe embed that is set to autoplay. This work as expected in Chrome, but on Safari, it appears that the video loads, and tries to play, but then stops, and shows a black frame.

Here's a link to the site: https://corpuscallosum.github.io/egs-site/#work

Here's an example of one of the project pages: https://corpuscallosum.github.io/egs-site/projects/curtain_of_light

Here's the HTML code for the project page showing the Vimeo embed code:

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/309779980? 
    autoplay=1&loop=1&title=0&byline=0&portrait=0"
    style="position:absolute;top:0;left:0;width:100%;height:100%;"
    frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay">
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

I understand that videos with audio cannot autoplay without a user-action, but since these pages are in different routes, the user-action of linking to the project page seems like it should suffice, and it works as expect in Chrome. So why doesn't it work in Safari? Any ideas for a workaround here? (at the very least I'd like to display the video poster on Safari if the video doesn't autoplay, rather than just having a black frame, which makes the site seem broken...)

Thanks!

Upvotes: 0

Views: 1380

Answers (1)

l3l0
l3l0

Reputation: 3393

Please check https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari/ I suppose user interaction mean that user need to click play.

On vimeo site you have as well described autoplay restriction https://help.vimeo.com/hc/en-us/articles/12426486963857-Autoplay-and-loop-embedded-videos and described possible workarounds (basically to autoplay video on mac you need to mute it).

About how to make poster image for vimeo free you can search for other stackoverflow answers.

Upvotes: 0

Related Questions