templates/web/videos.html.twig line 1

Open in your IDE?
  1. {% extends 'web/base.html.twig' %}
  2. {% block title %}Videoteka – 2sweet Slastičarnica Zagreb{% endblock %}
  4. {% block seo %}
  5. <meta name="description" content="Pogledajte video savjete i inspiraciju za svadbene torte i kolače od 2sweet slastičarnice Zagreb. Edukativni i inspirativni sadržaj.">
  6. <meta property="og:title" content="Videoteka – 2sweet Slastičarnica Zagreb">
  7. <meta property="og:description" content="Video savjeti i inspiracija za svadbene torte i kolače.">
  8. {% endblock %}
  10. {% block body %}
  12.     {{ include('web/components/inner/breadcrumb.html.twig') }}
  14.     <div class="bgWhite">
  15.         <div class="container">
  16.             <div class="emptySpace-xs60 emptySpace120"></div>
  17.             <div class="row">
  18.                 <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
  19.                     <div class="big titleShortcode">
  20.                         <div class="emptySpace20 emptySpace-xs5"></div>
  21.                         <h2 class="h2 bottomLine">Videoteka</h2>
  22.                         <div class="emptySpace30"></div>
  23.                     </div>
  24.                 </div>
  25.             </div>
  26.             <div class="emptySpace75 emptySpace-xs30"></div>
  28.             <div class="row">
  29.                 {% for video in videos %}
  30.                 <div class="col-sm-6 col-md-4" style="margin-bottom:40px;">
  31.                     <div class="normall contentShortcode" style="cursor:pointer;" onclick="openVideoModal('{{ video.id }}')">
  33.                         {# Thumbnail #}
  34.                         <div style="position:relative; overflow:hidden; border-radius:6px;">
  35.                             {% if video.type == 'youtube' and video.youtubeId %}
  36.                                 <img src="https://img.youtube.com/vi/{{ video.youtubeId }}/hqdefault.jpg"
  37.                                      class="imgShortcode"
  38.                                      style="width:100%; height:220px; object-fit:cover; display:block;"
  39.                                      alt="{{ video.title }}">
  40.                             {% elseif video.thumbnail %}
  41.                                 <img src="{{ asset('uploads/' ~ video.thumbnail) }}"
  42.                                      class="imgShortcode"
  43.                                      style="width:100%; height:220px; object-fit:cover; display:block;"
  44.                                      alt="{{ video.title }}">
  45.                             {% else %}
  46.                                 <div style="width:100%; height:220px; background:#f0ebe8; display:flex; align-items:center; justify-content:center; border-radius:6px;">
  47.                                     <span style="font-size:48px; opacity:0.4;">🎬</span>
  48.                                 </div>
  49.                             {% endif %}
  51.                             {# Play button overlay #}
  52.                             <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.25); transition:background 0.2s;"
  53.                                  onmouseover="this.style.background='rgba(0,0,0,0.4)'"
  54.                                  onmouseout="this.style.background='rgba(0,0,0,0.25)'">
  55.                                 <div style="width:56px; height:56px; background:#b85b63; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,0.3);">
  56.                                     <span style="color:#fff; font-size:22px; margin-left:4px;">&#9654;</span>
  57.                                 </div>
  58.                             </div>
  60.                             {# Tip badge #}
  61.                             <div style="position:absolute; top:10px; right:10px;">
  62.                                 {% if video.type == 'youtube' %}
  63.                                     <span style="background:#ff0000; color:#fff; font-size:11px; padding:2px 8px; border-radius:3px; font-weight:bold;">YouTube</span>
  64.                                 {% elseif video.type == 'vimeo' %}
  65.                                     <span style="background:#1ab7ea; color:#fff; font-size:11px; padding:2px 8px; border-radius:3px; font-weight:bold;">Vimeo</span>
  66.                                 {% endif %}
  67.                             </div>
  68.                         </div>
  70.                         <div class="emptySpace15"></div>
  71.                         <h4 class="h4" style="margin-bottom:8px;">{{ video.title }}</h4>
  72.                         {% if video.description %}
  73.                             <p style="color:#888; font-size:14px; line-height:1.6;">{{ video.description }}</p>
  74.                         {% endif %}
  75.                     </div>
  76.                 </div>
  77.                 {% else %}
  78.                 <div class="col-12 text-center">
  79.                     <p class="normall" style="color:#aaa;">Videoteka je trenutno prazna.</p>
  80.                 </div>
  81.                 {% endfor %}
  82.             </div>
  84.             <div class="emptySpace-xs60 emptySpace120"></div>
  85.         </div>
  86.     </div>
  88.     {# Modal za reprodukciju #}
  89.     <div id="video-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:9998; align-items:center; justify-content:center;"
  90.          onclick="closeVideoModal()">
  91.         <button onclick="closeVideoModal()" style="position:absolute; top:20px; right:30px; background:none; border:none; color:#fff; font-size:36px; cursor:pointer; z-index:1;">&times;</button>
  92.         <div onclick="event.stopPropagation();" style="width:90vw; max-width:900px;">
  93.             <div id="video-modal-inner" style="position:relative; padding-bottom:56.25%; height:0;">
  94.             </div>
  95.         </div>
  96.     </div>
  98.     {# Podaci videa u JS #}
  99.     <script>
  100.     var videoData = {
  101.         {% for video in videos %}
  102.         '{{ video.id }}': {
  103.             type: '{{ video.type }}',
  104.             {% if video.type == 'youtube' %}
  105.             embedUrl: '{{ video.embedUrl }}',
  106.             {% elseif video.type == 'vimeo' %}
  107.             embedUrl: '{{ video.embedUrl }}',
  108.             {% elseif video.type == 'upload' %}
  109.             src: '{{ asset('uploads/' ~ video.videoSource) }}',
  110.             {% elseif video.type == 'link' %}
  111.             embedUrl: '{{ video.embedUrl }}',
  112.             {% endif %}
  113.         },
  114.         {% endfor %}
  115.     };
  117.     function openVideoModal(id) {
  118.         var v = videoData[id];
  119.         if (!v) return;
  120.         var inner = document.getElementById('video-modal-inner');
  121.         inner.innerHTML = '';
  123.         if (v.type === 'upload') {
  124.             inner.innerHTML = '<video controls autoplay style="position:absolute;top:0;left:0;width:100%;height:100%;background:#000;">' +
  125.                 '<source src="' + v.src + '"></video>';
  126.         } else if (v.embedUrl) {
  127.             inner.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="' + v.embedUrl + '" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>';
  128.         }
  130.         var modal = document.getElementById('video-modal');
  131.         modal.style.display = 'flex';
  132.         document.body.style.overflow = 'hidden';
  133.     }
  135.     function closeVideoModal() {
  136.         document.getElementById('video-modal').style.display = 'none';
  137.         document.getElementById('video-modal-inner').innerHTML = '';
  138.         document.body.style.overflow = '';
  139.     }
  141.     document.addEventListener('keydown', function(e) {
  142.         if (e.key === 'Escape') closeVideoModal();
  143.     });
  144.     </script>
  146.     <div class="footerSeparator"></div>
  147.     <div class="emptySpace50 emptySpace-xs30"></div>
  149. {% endblock %}