87 lines
4.2 KiB
Twig
87 lines
4.2 KiB
Twig
{% extends 'layouts/base.twig' %}
|
|
|
|
{% block content %}
|
|
<h1 class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</h1>
|
|
|
|
<div class="container text-center">
|
|
<div class="row">
|
|
{% if videos %}
|
|
{% for video in videos %}
|
|
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-2">
|
|
<div class="video-item">
|
|
{% set url_video = video.meta('url_video') %}
|
|
{% set video_data = generar_embed(url_video) %}
|
|
{% if video_data %}
|
|
|
|
{# Thumbnail clickeable en lugar del iframe #}
|
|
<div class="ratio ratio-16x9 video-thumbnail-container position-relative rounded"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#videoModal"
|
|
data-video-url="{{ video_data.embed_url }}"
|
|
data-video-title="{{ video.titulo }}"
|
|
data-video-allow="{{ video_data.allow }}"
|
|
style="cursor: pointer;
|
|
background-image: url('{{ video_data.thumbnail_url }}');
|
|
background-size: cover;
|
|
background-position: center;">
|
|
|
|
{# Overlay con botón play #}
|
|
<div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
|
|
<div class="btn btn-danger btn-lg rounded-circle d-flex align-items-center justify-content-center"
|
|
style="width: 60px; height: 60px;">
|
|
<i class="bi bi-play-btn" style="font-size: 2rem;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{# Overlay oscuro al hover #}
|
|
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 hover-overlay"
|
|
style="transition: opacity 0.3s ease;">
|
|
</div>
|
|
|
|
{# Título del vídeo #}
|
|
<div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-3 rounded">
|
|
<h6 class="mb-0 text-white">{{ video.titulo }}</h6>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<div class="alert alert-warning">
|
|
<h5>{{ video.titulo }}</h5>
|
|
<p class="mb-0">No se ha configurado URL para este vídeo.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p>No hay vídeos disponibles.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# MODAL PARA REPRODUCIR VÍDEO #}
|
|
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="videoModalLabel"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div class="ratio ratio-16x9">
|
|
<iframe id="modalVideoIframe"
|
|
src=""
|
|
title=""
|
|
frameborder="0"
|
|
allow=""
|
|
allowfullscreen
|
|
loading="lazy">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% endblock %} |