templates/fiche/_includes/videos.html.twig line 1

Open in your IDE?
  1. {% if etablissement.videos|length >= 1%}
  2.     <div class="fiche-module video-plus">
  3.     <h2 id="videos">Vidéos</h2>
  5.             <!-- col gauche -->
  6.             {% for video in etablissement.videos|slice(0,3) %}
  7.             <div class="" data-bs-toggle="modal" data-bs-target="#videoModal" data-id="{{ video.id }}" data-title="{{ video.titre }}" data-url="{{ video.url | fix_youtube_url }}">
  8.                 <i class="i-video"></i>
  9.                 <img src='{{ (vich_uploader_asset(video, 'videoFile') ?: '/black.jpg') | imagine_filter('fiche_video_small')}}' class="w-100"/>
  10.             </div>
  11.             {% endfor %}
  12.             <div class="dummy"></div>
  13.             <div class="dummy"></div>
  14.             <!-- col droite -->
  15.             {#<div class="video-baseline">
  16.                 {% for video in etablissement.videos|slice(1,3) %}
  17.                     <div class="{% if loop.index > 2 %}d-none{% endif %} d-md-flex d-lg-flex" data-bs-toggle="modal" data-bs-target="#videoModal" data-id="{{ video.id }}" data-title="{{ video.titre }}" data-url="{{ video.url | fix_youtube_url }}">
  18.                         <i class="i-video"></i>
  19.                         <img src='{{vich_uploader_asset(video, 'videoFile')?: '/black.jpg' | imagine_filter('fiche_video_small')}}'/>
  20.                     </div>
  21.                 {% endfor %}
  22.             </div>#}
  23.         {% if etablissement.videos|length > 3 %}
  24.             <div class="voir-plus">
  25.                 <a href="#" data-bs-toggle="modal" data-bs-target="#videoModal" data-id="{{ etablissement.videos[0].id }}" data-title="{{ etablissement.videos[0].titre }}" data-url="{{ etablissement.videos[0].url | fix_youtube_url }}" class="ttes-videos">Voir toutes les vidéos</a>
  26.             </div>
  27.         {% endif %}
  28.     </div>
  29.     {# MODAL #}
  30.     <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  31.         <div class="modal-dialog modal-dialog-centered" role="document">
  32.             <div class="modal-content">
  33.                 <div class="modal-header">
  34.                     <h5 class="modal-title video" id="exampleModalLongTitle">...</h5>
  35.                     <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  36.                         {#<span aria-hidden="true">&times;</span>#}
  37.                     </button>
  38.                 </div>
  39.                 <div class="modal-body modal-body-aep d-flex flex-wrap">
  40.                     <div class="col-12 col-lg-8 p-0 container-video-player">
  41.                         <div class="embedresize">
  42.                             <div>
  43.                                 {# SRC genere dans app.js #}
  44.                                 <iframe id="video-player" width="560" height="315" src="" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowfullscreen></iframe>
  45.                             </div>
  46.                         </div>
  47.                     </div>
  48.                     <div class="col-12 col-lg-4 modal-video-right">
  49.                         {% for video in etablissement.videos %}
  50.                             <div class="modal-item-right" id="video-{{ video.id }}" data-title="{{ video.titre }}" data-url="{{ video.url | fix_youtube_url }}" data-video-id="{{ video.id }}">
  51.                                 <div class="col-5">
  52.                                     <i class="i-video-small"></i>
  53.                                     <img src='{{(vich_uploader_asset(video, 'videoFile') ?: '/black.jpg') | imagine_filter('fiche_video_small')}}' class="w-100"/>
  54.                                 </div>
  55.                                 <div class="col-7 pl-3">{{ video.titre }}</div>
  56.                             </div>
  57.                         {% endfor %}
  58.                     </div>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </div>
  63. {% endif %}