Vimeo thumb showing up but video doesn't play.

[ohbob]

Downloaded the sample app, changed ID of vimeo video and the thumb shows up but doesn't play.

[ohbob]

ps: is there a way to hide the initial controls? I would love to show them only when I press the play icon.

[benwoodward]

To change how the Plyr instance works you'll have to refer to the plyr documentation

Could you put your code into an example repo so I can see the problem please?

[ohbob]

To change how the Plyr instance works you'll have to refer to the plyr documentation

Could you put your code into an example repo so I can see the problem please?

you can just download your own repo and you will see the problem with vimeo.

[benwoodward]

I just went through the examples again and although the vimeo example does work, noticed that the video titled "Vimeo (Not Progressive Enhancement)" has an issue. Assuming this is the one you mean?

I'll take a look into it.

EDIT: The error:

player.js:2 Uncaught (in promise) NotAllowedError: play() can only be initiated by a user gesture.
    at https://player.vimeo.com/api/player.js:2:8705
    at Array.forEach (<anonymous>)
    at b (https://player.vimeo.com/api/player.js:2:8679)
    at e (https://player.vimeo.com/api/player.js:2:10426)

Must have missed this because the error doesn't occur if you wait a minute before pressing play. Looks like it's an unresolved promise issue, probably because there are too many player instances on one page.

EDIT: Relevant Vimeo.js issue: vimeo/player.js#389

[ohbob]

had to use this to get the player working btw.

svelte-plyr/src/plyr.scss
@charset "utf-8"; @import "../../plyr/src/sass/plyr.scss"

the import that was in the file didn't work
@import "../node_modules/plyr/src/sass/plyr.scss"

[benwoodward]

@ohbob Oh great. Glad you got it working, sorry been meaning to get back to you about this but I've been extremely busy.

Do you want to open a PR? I can add these lines otherwise.

EDIT: The import I've added assumes you have installed plyr via npm install and that you have a standard Svelte app directory structure based on sveltejs/template. e.g.:

📁node_modules/
📁public/
📁src/
package.json
rollup.config.js

But perhaps that's the wrong approach. I'm gonna find a way to make this path configurable with the existing path as a default fallback.

EDIT: What does your Svelte app directory look like out of curiosity?

[benwoodward]

rollup-plugin-sass has an import feature whereby prepending ~ will auto-resolve the path to wherever the node_modules directory is. Do you have a node_modules directory in the project?

[ohbob]

I had the plyr installed via npm install plyr, the directory was in the nodes, but for some reason i could not resolve it, so this way at least i could get it working. Thanks for the tip, will try it out next time i use the package.

[benwoodward]

I've added some missing configuration details to the README.md.

Not sure if you did this, but you need to do the following in your app:

• Install the required dependencies:

npm install --save plyr rollup-plugin-postcss node-sass

• Install the latest version from master that uses rollup-plugin-sass's tilde import flag that auto-detects your node_modules directory

npm install --save benwoodward/svelte-plyr#master

• Add postcss to your rollup.config.js

import postcss from 'rollup-plugin-postcss';

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
          postcss(),
        ]
};

Can you let me know if doing the above fixes the issue?

[ohbob]

i will be re-doing a site for a friend soon, i will let you know as i will have to use it there.