<div class="bg-black rounded-lg border border-base-300 overflow-hidden my-5 p-4" 
     x-data="{ 
        initPlayer() {
            if (!this.$refs.player) return;
            const player = new Plyr(this.$refs.player, {
                captions: { active: true, update: true, language: 'auto' },
                speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] }
            });
            console.log('Plyr initialized');
        } 
     }"
     x-init="initPlayer()">
    
    {% if is_iframe %}
        <div class="relative w-full" style="padding-bottom: 56.25%; height: 0; overflow: hidden;">
            <iframe src="{{ video_url }}" 
                    allowfullscreen 
                    webkitallowfullscreen 
                    mozallowfullscreen
                    class="absolute top-0 left-0 w-full h-full border-0 rounded-t-lg"></iframe>
        </div>
        <div class="text-xs text-base-content/40 mt-3 text-center">
            <i class="fa-solid fa-lightbulb"></i> Lecteur externe utilisé. Les contrôles dépendent de l'hébergeur.
        </div>
    {% else %}
        <div class="w-full rounded-lg overflow-hidden">
            <video x-ref="player" playsinline controls preload="metadata" class="w-full rounded-lg">
                <source src="{{ video_url }}" type="video/mp4">
            </video>
        </div>
    {% endif %}
    
    <div class="flex justify-center mt-4">
        <a href="{{ video_url }}" class="btn btn-sm btn-ghost" target="_blank">
            <i class="fas fa-external-link-alt"></i> Ouvrir sur l'hébergeur
        </a>
    </div>
</div>
