<div class="player-embed-box" 
     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="iframe-container">
            <iframe src="{{ video_url }}" 
                    allowfullscreen 
                    webkitallowfullscreen 
                    mozallowfullscreen></iframe>
        </div>
        <div class="player-info-hint">
            💡 Lecteur externe utilisé. Les contrôles dépendent de l'hébergeur.
        </div>
    {% else %}
        <div class="video-wrapper">
            <video x-ref="player" playsinline controls preload="metadata">
                <source src="{{ video_url }}" type="video/mp4">
            </video>
        </div>
    {% endif %}
    
    <div class="player-footer-actions">
        <a href="{{ video_url }}" class="btn btn-sm btn-secondary" target="_blank">
            <i class="fas fa-external-link-alt"></i> Ouvrir sur l'hébergeur
        </a>
    </div>
</div>

<style>
.player-embed-box {
    margin: 20px 0;
    padding: 15px;
    background: #000;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.video-wrapper {
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.player-info-hint {
    font-size: 0.8rem;
    color: #888;
    margin-top: 10px;
    text-align: center;
}
.player-footer-actions {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}
</style>
