support: DefaultUi not adjusted well when deployed

I use Vue3, and the above screenshot is when I do "npm run serve", displayed in my localhost. The above one is the screenshot when I deploy to firebase server.

Here’s my html code.

<Player class="player" v-for="item in videos" :key="item.videoId" playsinline ref="player"@vPlaybackReady="onPlaybackReady">
  <Video poster="https://media.vimejs.com/poster.png">
    <source :data-src = item.videoId type="video/mp4">
  </Video>
  <DefaultUi>
    <TapSidesToSeek />
  </DefaultUi>
</Player>

Here’s my script code. import { Player, Video, DefaultUi } from ‘@vime/vue-next’; import ‘@vime/core/themes/default.css’;

What should I do to make this work? Thank you.

[mihar-22]

Hey @Enigma10 sure…

1. Fork and clone the repo
2. Run npm install
3. cd core and run npm install
4. npm run serve

Fullscreen Code is mostly here:

• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/fullscreen/Fullscreen.ts
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/fullscreen/FullscreenApi.ts
• https://github.com/vime-js/vime/blob/master/core/src/components/core/player/player.tsx#L77-L82

The theme code is here:

• https://github.com/vime-js/vime/tree/master/core/src/themes

After editing the themes you run npm run build:themes to setup them up for production and you’ll find the output here:

• https://github.com/vime-js/vime/tree/master/core/themes

[takeCareAbout]

Fixed this problem by import default.css from main.js (I guess styles should load before player). Also took css from CDN (I develop local project without internet connection)