root
78 lines
2.0 KiB
HTML
78 lines
2.0 KiB
HTML
<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">
|
|
<i class="fa-solid fa-lightbulb"></i> 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: 4px;
|
|
border: 1px solid #2a2d32;
|
|
}
|
|
.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: var(--text-dim);
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
}
|
|
.player-footer-actions {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|