I recently started implementing the vue-video-player library into my project. However, I'm facing an issue where the player renders at a width of only 100px. I'm not sure why this is happening or how to adjust it.
After going through the documentation, I couldn't find a solution to this problem. Additionally, working with the css files provided by the library has been a bit confusing for me. I'm not entirely certain if I've imported them correctly, especially since the documentation mentions using require instead of import.
Could someone please guide me on how to change the width of the player?
<template>
<div>
<video-player
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
>
</video-player>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
name: 'foo',
components: {
videoPlayer,
},
data () {
return {
playerOptions: {
muted: true,
language: 'en',
playbackRates: [1.0],
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "/static/images/defaults/image.png",
}
}
},
}
</script>