src/Notaris/FrontendBundle/Resources/views/tv/video.html.twig line 1

Open in your IDE?
  1. {% extends '@NotarisFrontend/layout2017.html.twig' %}
  3. {% if notaryId is defined %}
  4.     {% set headTitle = info.header1  | replace({"<BR />":" "}) ~ ' - ' ~  subsite.pageTitle %}
  5. {% else %}
  6.     {% set headTitle = subsite.pageTitle %}
  7.     {% if section.meta.ogTitle and section.parent and section.parent.meta.ogTitle %}
  8.         {% set headTitle = section.meta.ogTitle | trans ~ " | " ~ section.parent.meta.ogTitle | trans %}
  9.     {% endif %}
  10.     {% set headTitle = headTitle ~ ' ' ~ 'alg_basetitle' | trans %}
  11. {% endif %}
  13. {% set linked_url_nl = url_nl ~ path('notaris_frontend_tv') %}
  14. {% set linked_url_fr = url_fr ~ path('notaris_frontend_tv') %}
  16. {% block title %}
  17.     <title>{{ headTitle }}</title>
  18. {% endblock %}
  20. {% set canonicalLink = url_scheme ~ '://www.' ~ _context['url_' ~ locale] ~ path('notaris_frontend_tv_detail_video', {slug: pageslug, slugvideo: video.slug}) %}
  21. {% block extralinks %}
  22.     <link rel="canonical" href="{{ canonicalLink }}"  />
  23. {% endblock %}
  25. {% block extrameta %}
  26.     <meta name="keywords" content="{{ section.meta.metaKeywords }}"/>
  27.     <meta name="description" lang="{{ locale }}" content="{{ section.meta.metaDescription }}"/>
  29.     <meta property="og:title" content="{{ 'tv_notaris' | trans | raw }} - {{ video.title }}" />
  30.     <meta property="og:type" content="video.movie" />
  31.     <meta property="og:url" content="{{ canonicalLink }}" />
  33.     {% if video.meta.ogDescription %}
  34.     <meta property="og:description" content="{{ video.meta.ogDescription }}" />
  35.     {% endif %}
  37.     {% if shareImageVideo %}
  38.         <meta property="og:image" content="{{ shareImageVideo }}" />
  39.         <meta property="og:image:width" content="1200" />
  40.         <meta property="og:image:height" content="630" />
  41.     {% else %}
  42.         {{ parent() }}
  43.     {% endif %}
  44. {% endblock %}
  46. {% block body %}
  48.     <section class="content u-padding-top-large">
  49.         {{ include('@NotarisFrontend/module/sidenav.html.twig', {'subsite': subsite }) }}
  51.         <div id="content-center" class="content-center-large standard">
  52.             <div id="content-center-header">
  53.                 <article class="niveau3">
  54.                     <div class="article-content">
  55.                         <h2 class="u-text-lineheight-semilarge u-h2@desktop">{{ 'tv_notaris' | trans | raw }} - {{ video.title }}</h2>
  56.                     </div>
  57.                 </article>
  58.             </div>
  60.             <section id="info" class="no-margin">
  61.                 <div id="info-content" class="niveau1 info-news-content">
  62.                     <article>
  63.                         {#{% if video.asset.assetVideopaths[0].videopath.youtube != '' %}
  64.                             <div id="youtube_{{ video.asset.assetVideopaths[0].videopath.youtube }}"></div>
  65.                         {% else %}
  66.                             {% set poster = "" %}
  67.                             {% if video.asset.assetImages | length > 0 %}
  68.                                 {% set poster = '/uploads/' ~ locale ~ video.asset.assetImages[0].image.filename %}
  69.                             {% endif %}
  71.                             <video id="my_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="{{ poster }}" width="100%" height="300" data-setup="{}">
  72.                                 <source src="/video/{{ locale }}/{{ video.asset.assetVideopaths[0].videopath.path }}" type="video/mp4" >
  73.                             </video>
  75.                         {% endif %}#}
  76.                         {% if video.asset.assetVideopaths[0].videopath.youtube != '' %}
  77.                             <iframe class="o-tabpannel__content__youtube js-tabpannel-youtube u-margin-bottom-small" frameborder="0" allowfullscreen="1" title="YouTube video player" width="490" height="280" src="//www.youtube-nocookie.com/embed/{{ video.asset.assetVideopaths[0].videopath.youtube }}?enablejsapi=1&widgetid=1&rel=0" kwframeid="2"></iframe>
  78.                         {% else %}
  79.                             {% set poster = "" %}
  80.                             {% if video.asset.assetImages | length > 0 %}
  81.                                 {% set poster = '/uploads/' ~ locale ~ video.asset.assetImages[0].image.filename %}
  82.                             {% endif %}
  83.                             <video class="o-tabpannel__content__video js-tabpannel-video u-margin-bottom-small" controls preload="auto" poster="{{ poster }}" width="100%" height="300">
  84.                                 <source src="/video/{{ locale }}/{{ video.asset.assetVideopaths[0].videopath.path }}">
  85.                             </video>
  86.                         {% endif %}
  87.                         <h2>{{ video.publicationDate | localdate }}</h2>
  88.                     </article>
  89.                     {% if video.tags | length > 0 %}
  90.                         {#<article class="tags">
  91.                             <p>
  92.                                 {% for tag in video.tags %}
  93.                                     <a data-slug="{{ tag.slug }}" href="{{ path('notaris_frontend_tag', {'tagSlug': tag.slug}) }}" title="{{ tag.name }}">{{ tag.name }}</a>
  94.                                 {% endfor %}
  95.                             </p>
  96.                             <div class="cleaner">&nbsp;</div>
  97.                         </article>#}
  98.                         <div class="c-tags u-margin-top-small u-padding-left-small u-padding-right-small js-tags">
  99.                             {% for tag in video.tags %}
  100.                                 <a href="{{ path('notaris_frontend_tag', {'tagSlug': tag.slug}) }}" data-slug="{{ tag.slug }}" data-tag-clicked="{{ path('notaris_frontend_tag_clicked') }}" title="{{ tag.name }}" class="c-tags__item"><small>{{ tag.name }}</small></a>
  101.                             {% endfor %}
  102.                         </div>
  103.                         <div class="c-divider c-divider--light">&nbsp;</div>
  104.                     {% endif %}
  107.                     <div class="c-movies">
  108.                         <article class="u-no-border">
  109.                             <h1>{{ 'tv_gerelateerd' | trans | raw }}</h1>
  110.                         </article>
  111.                         {% for video in randomvideos %}
  113.                         <div class="c-movies__item">
  114.                             <a href="{{ path('notaris_frontend_tv_detail_video', {'slug': pageslug, 'slugvideo': video.slug}) }}" title="{{ video.title }}" class="o-grid__item o-object-fit c-movies__link {% if video.asset.assetImages | length == 0 %}o-grid__item--overlay{% endif %}" data-slug="{{ video.slug }}">
  115.                                 {% if video.asset.assetImages | length > 0 %}
  116.                                     {% set image_path = 'uploads/'~ locale ~ '/' ~ video.asset.assetImages[0].image.filename %}
  117.                                     {{image_path | responsive_image_source([448, 353, 436], {'filterset': 'responsive_article_image', 'sizes': '(min-width: 960px) 448px, (min-width: 768px and max-width: 960px) 353px, (min-width: 480px and max-width: 768px) 436px, (max-width: 480px) 100vw', 'alt': video.title, 'title': video.title}) }}
  118.                                 {% endif %}
  119.                                 <div class="c-movies__overlay">
  120.                                     <div class="o-grid__item__overlay__title c-movies__info">
  121.                                         <h3 class="u-h4">{{ video.title }}</h3>
  123.                                     </div>
  124.                                     <button class="c-btn c-btn--icon c-btn--icon--large c-btn__play">
  125.                                         <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><style>.z{fill:#FFF;}</style><path class="z" d="M1576 927L248 1665q-23 13-39.5 3t-16.5-36V160q0-26 16.5-36t39.5 3l1328 738q23 13 23 31t-23 31z" fill="true"/></svg>
  126.                                     </button>
  128.                                 </div>
  129.                                 <div class="c-movies__info-back">
  130.                                     <span class="c-movies__meta">{{ video.publicationDate | localdate }}</span><br>
  131.                                     <span class="c-movies__meta c-movies__meta--theme">{{ 'tv_rubriek'|trans }}:</span>
  132.                                     <span class="c-movies__meta">{% for subsite in video.subsites %}{{ subsite.subsite.name }}{% if loop.last and not video.isVaria %}{% else %}, {% endif %}{% endfor %}{% if video.isVaria %}{{ 'tv_varia_tekst' | trans }}{% endif %}</span>
  133.                                 </div>
  134.                             </a>
  135.                         </div>
  138.                         {% endfor %}
  139.                     </div>
  141.                 </div>
  142.             </section>
  144.             {# dynamische cms modules #}
  145.             {{ include('@NotarisFrontend/module/mod_cms.html.twig', {'rightmodules': rightmodules }) }}
  146.         </div>
  147.         <!-- #### CONTENT #### -->
  149.         <!-- modules -->
  151.         {#
  152.            <aside id="content-right">
  153.                {% if notaryId is defined %}
  154.                    {{ include('@NotarisFrontend/Sven/_sven_address.html.twig') }}
  155.                {% else %}
  156.                    {{ include('@NotarisFrontend/Module/notsearch_module.html.twig') }}
  157.                {% endif %}
  160.                <div class="cleaner">&nbsp;</div>
  163.            </aside>
  165.         #}
  167.         {% include '@NotarisFrontend/navigation/mobilesubnav.html.twig' with {'websiteSlug': subsite.slug, 'isSven':false, 'isHome':false, 'subsite': subsite} %}
  171.     </section>
  174. {% endblock %}
  176. {% block extrajs %}
  177.     <script>
  178.         //adresbook();
  179.         $(document).ready(function(){
  180.             $('.info-news-content a.relvid').click(function(e){
  181.                 e.preventDefault();
  183.                 var href = $(this).attr('href');
  184.                 var slug = $(this).attr('data-slug');
  186.                 $.getJSON('{{ path('notaris_frontend_tv_clicked') }}/' + slug, function(result){
  187.                     window.location.href = href;
  188.                 });
  189.             });
  192.         });
  194.         /*function onYouTubeIframeAPIReady() {
  197.             {% if video.asset.assetVideopaths[0].videopath.youtube != '' %}
  199.                 var path = '{{ video.asset.assetVideopaths[0].videopath.youtube }}';
  200.                 var player = new YT.Player('youtube_' + path, {
  201.                     height: '250',
  202.                     width: '490',
  203.                     videoId: path,
  204.                 });
  206.             {% endif %}
  210.         }
  212.         var tag = document.createElement('script');
  214.         tag.src = "https://www.youtube.com/iframe_api";
  215.         var firstScriptTag = document.getElementsByTagName('script')[0];
  216.         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);*/
  217.     </script>
  219.     <script src="/js/video.js"></script>
  220.     <script>
  221.         videojs.options.flash.swf = "/js/video-js.swf";
  222.     </script>
  224. {% endblock %}