Vimeo player not working properly on chrome

[Yaasha]

The vimeo player won't start after clicking the gallery play button. This only occurs on chrome, firefox plays the video just fine.

Here is an example code to reproduce the issue:

  <link rel="stylesheet" href="css/blueimp-gallery.min.css" />

  <div
    id="blueimp-gallery"
    class="blueimp-gallery blueimp-gallery-controls"
    aria-label="image gallery"
    aria-modal="true"
    role="dialog"
  >
    <div class="slides" aria-live="polite"></div>
    <h3 class="title"></h3>
    <a
      class="prev"
      aria-controls="blueimp-gallery"
      aria-label="previous slide"
      aria-keyshortcuts="ArrowLeft"
    ></a>
    <a
      class="next"
      aria-controls="blueimp-gallery"
      aria-label="next slide"
      aria-keyshortcuts="ArrowRight"
    ></a>
    <a
      class="close"
      aria-controls="blueimp-gallery"
      aria-label="close"
      aria-keyshortcuts="Escape"
    ></a>
    <a
      class="play-pause"
      aria-controls="blueimp-gallery"
      aria-label="play slideshow"
      aria-keyshortcuts="Space"
      aria-pressed="false"
      role="button"
    ></a>
    <ol class="indicator"></ol>
  </div>

  <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
    integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
    crossorigin="anonymous"
  ></script>
  <script src="js/blueimp-gallery.min.js"></script>
  <script>
    var gallery = blueimp.Gallery([
      {
        type: 'text/html',
        href: 'https://vimeo.com/347119375',
        vimeo: '347119375',
        poster: 'https://i.vimeocdn.com/video/797382244_640.jpg'
      },
    ])
  </script>

I'm guessing this issue is related to chrome's autoplay policy, since the gallery controls the player through external controls, which does not get registered as user action and chrome flags it as an autoplay attempt.

Adding allow="autoplay" to the vimeo iframe and setting its src to start with https:// should solve this.

[blueimp]

Thanks for your contribution @Yaasha!

Unfortunately I was not able to reproduce the issue with Chrome 84 on MacOS.

Here's your demo code on JSFiddle: https://jsfiddle.net/bxc08674/

You can also test the Vimeo integration on the official demo: https://blueimp.github.io/Gallery/ In the Carousel video gallery, the video "KN1GHT - Last Moon" is hosted by Vimeo.

Could you confirm if you can reproduce the issue on the official demo or the provided JSFiddle link? And if yes, could you provide more info on your environment, e.g. Chrome version and Operating System info (e.g. Windows version)?

[Yaasha]

Hi,

Yes, I am having the same issue on the official demo and the JSFiddle. However, I've noticed that on these pages, I can successfully start the video (after page reload) roughly 50% of the time, whereas before I got this issue every time.

Here's more info regarding my setup:

• Google Chrome - Version 84.0.4147.105 (Official Build) (64-bit)
• OS - Ubuntu 18.04.4 LTS (64-bit) (GNOME 3.28.2)

I've also tried running the demo on the same Chrome version on Windows 10 and everything worked fine, so this might be Ubuntu/Linux exclusive issue. I also know that other people could reproduce this issue, so it's not exclusive to my exact setup (however I don't know their setup info).

I've tried running the demo in anonymous window and with all extensions disabled and could still reproduce the issue.

Hope this helps.

[blueimp]

Thanks for the info! I could reproduce this on Chromium 84 on ubuntu 18.04 as well. And I can confirm that your fix in https://github.com/blueimp/Gallery/pull/254 resolves the issue, which has been merged.