templates/video-onpc/fiche.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block head %}
  3.     <script type="application/ld+json">
  4.         {
  5.             "@context": "https://schema.org",
  6.             "@type": "VideoObject",
  7.             "name": "{{ video.titre }}",
  8.             "description": "{{ video.texte }}",
  9.             "thumbnailUrl": [
  10.                 "{{ video.url }}"
  11.             ],
  12.             "uploadDate": "{{ video.dateMaj }}",
  13.             "contentUrl": "{{ video.url }}",
  14.             "regionsAllowed": "FR"
  15.         }
  16.     </script>
  17. {% endblock %}
  19. {% block body %}
  20. <section class="container page-video single">
  21.     <div id="breadcrumb">
  22.         {% include 'video-onpc/_includes/breadcrumb.html.twig' with { lieu: null, video: video } %}
  23.     </div>
  25.     <div class="title">
  26.         <h1>{{ video.titre }}</h1>
  27.     </div>
  29.     <section>
  30.         <article>
  31.             <div class="illustration text-center">
  32.                 <div class="vimeo-wrapper" data-vimeo-id="{{ video.idVimeo }}">
  33.                     <div class="vimeo-cover">
  34.                         <img src="{{ vich_uploader_asset(video,'photoFile') | imagine_filter('webtv_fiche')}}" alt="{{video.titre}}">
  35.                         <button class="vimeo-play" aria-label="Play video"></button>
  36.                     </div>
  37.                 </div>
  38.             </div>
  40.             <div class="content pb-4">
  42.                   <div class="row">
  43.                     <div class="col">
  44.                         <p class="schedule">
  45.                             <small>Le {{ video.createdAt | format_date(pattern='d MMMM Y') }}</small>
  46.                         </p>
  47.                         <p>{{ video.description | raw }}</p>
  48.                     </div>
  49.                     {% if video.annonceurs is defined and video.annonceurs is not empty %}
  50.                     <div class="col-md-3 mt-2">
  51.                             <div class="container">
  52.                                 <div class="row justify-content-md-center">
  53.                                     {% for etablissement in video.annonceurs %}
  54.                                         {% set urlFiche = pathBuilder.buildFiche(etablissement) %}
  55.                                         {% set imgAlt = [
  56.                                                 etablissement.denomination,
  57.                                                 etablissement.codePostal,
  58.                                                 (etablissement.ville ? etablissement.ville.libelle : ''),
  59.                                             ]|join(' - ')|trim(' -') %}
  60.                                     <div class="col-md-auto mb-2">
  61.                                         <div class="text-center">
  62.                                             <img src="{{ vich_uploader_asset(etablissement.logo, 'logoFile') | imagine_filter('etab_hp_logo') }}"
  63.                                                 class="img-fluid mb-2"
  64.                                                 alt="{{ imgAlt }}">
  65.                                             <p class="mb-0 fw-semibold"><a href="{{ urlFiche }}">{{ etablissement.denomination }}</a></p>
  66.                                         </div>
  67.                                     </div>
  68.                                     {% endfor %}
  69.                                 </div>
  70.                             </div>
  71.                     </div>
  72.                     {% endif %}
  73.                 </div>
  74.             </div>
  75.         </article>
  76.     </section>
  77.     <p class="mb-4 pb-4">&nbsp;</p>
  78.     <p class="mb-4 pb-4">&nbsp;</p>
  79. </section>
  81. {% endblock %}
  83. {# Pour Vimeo #}
  84. {% block javascripts %}
  85.     {{ parent() }}
  86.     <script>
  87.         document.querySelectorAll('.vimeo-wrapper').forEach(wrapper => {
  88.             wrapper.addEventListener('click', () => {
  89.                 const videoId = wrapper.dataset.vimeoId;
  91.                 const iframe = document.createElement('iframe');
  92.                 iframe.src =
  93.                     `https://player.vimeo.com/video/${videoId}?autoplay=1&muted=0&title=0&byline=0&portrait=0`;
  94.                 iframe.allow = 'autoplay; fullscreen; picture-in-picture';
  95.                 iframe.allowFullscreen = true;
  97.                 wrapper.innerHTML = '';
  98.                 wrapper.appendChild(iframe);
  99.             }, { once: true });
  100.         });
  101.     </script>
  102. {% endblock %}