Problems with controls

[lewdias]

Hello!

In the Plyr github page, it shows that most controls are active by default, but when using this plugin for Vue, the only thing i get is Speed (for YouTube) and Speed + Captions (for Vimeo).

Also, the tracker seems really small for no reason. I tried downgrading to 5.1.0 and it didnt help for both issues.

YouTube iframe: I can change some options (like loop and change the speed values) but i cant seem to make buttons show up. Also, the quality array/object is empty:

Edit: Adding that i get the option to change speed in vimeo aswell. Edit2: New information about the options.

[francoism90]

Having the same issue, using the plyr sass instead of the provided css fixed the issue: @import '~plyr/src/sass/plyr';

Seems the latest changes hasn't been pushed to NPM, don't know if these issues has been fixed:

  "dependencies": {
    "plyr": "^3.5.2"
  },

[lewdias]

Hello Francoism90,

That fixed the bar, but the issues with the controls are still present.

Also, im using less, so i used the css file from the dist folder.

Thank you!

[francoism90]

@lewdias It seems a bit weird the CSS needs to imported twice as it seem to happen already with the component itself. But maybe I'm mistaken. :)

[marcellofuschi]

I'm having the same issue with the tracker and upgrading to the latest version of vue-plyr doesn't seem to help. Using import 'vue-plyr/dist/vue-plyr.css'

[lewdias]

Importing the CSS/SASS from plyr file like @francoism90 suggested worked for me.

I still have problems with the controls, though. Can't really add or remove options. Luckily it's not that important for this project so i hid it with CSS.

[marcellofuschi]

Yeah, it worked for me as well, but I consider it to be quite an ugly workaround... By the way, I'm also experiencing problems with the volume bar not appearing and only showing after you click on some part of the tracker. The problem keeps showing up if you import the CSS from plyr

[francoism90]

I've switched to zcuric/plyrue, still hope @redxtech can fix it in the near future. :)

[securedeveloper]

This is my way of passing custom controls and it seems to be working

<template>
    <vue-plyr
        ref="plyr"
        :options="playerOptions">
        <div
            data-plyr-provider="youtube"
            :data-plyr-embed-id="src"/>
    </vue-plyr>
</template>
<script>
    export default {
        data () {
            return {
                playerOptions: {
                    controls: [
                        'play-large',
                        'mute',
                        'fullscreen'
                    ]
                }
            }
        },
        props: {
            src: String
        },
        computed: {
            player () {
                return this.$refs.plyr.player
            }
        }
    }
</script>

[redxtech]

That is how you should be doing it. The CSS should now come bundled. I'll close this now, feel free to re-open if there's anything else.

[mortensassi]

For me it is still not working to override the SASS Variables since there is already the built CSS included. I am now currently unable to just set another color after importing the plyr SCSS, which needs me to move to the above mentioned alternative. Hope you'll fix this any soon