Player Not Loading - Vite + Laravel

[ElisameAraujo]

I try to install vidstack via webcomponent using Vite, but the player not loading e can't be played, only the YouTube iframe loads.

I follow the instructions in the installation page but no luck.

vite.config.js

import { defineConfig } from 'vite';
import { vite as vidstack } from 'vidstack/plugins';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vidstack({})
    ],
});

app.js

import 'bootstrap';
import 'vidstack/bundle';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

assistir-video.blade.php

[...]
<div class="row">
        <div class="col-md-9">           
            <media-player title="Sprite Fight" src="youtube/_cMxraX_5RE">
                <media-provider></media-provider>
                <media-video-layout thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt"></media-video-layout>
            </media-player>
            <div class="row">
[...]

What I doing wrong?

[Bahamut-Chocobo]

Sounds similar to the problem I had.
Tried to setup Vidstack in Laravel with the steps in this Getting Started (difference to your link: provider is HLS and styling layout is Tailwind CSS).

As part of the setup I added the import to the app.js as well

import 'vidstack/bundle';

The dev tools showed me that all media where loaded (cover, captions, HLS playlist, etc), but there was no way to play it.

I got around it by adding more imports

import 'vidstack/bundle';
import 'vidstack/player/ui';
import 'vidstack/player/layouts';

… which seems odd when importing the vidstack/bundle as the getting started guides states.

using tailwind, also needed to

import 'vidstack/icons';

Maybe you could try it as well.