templates/Magazine/DetailBlocks/BlogArticleVideo.html.twig line 1

Open in your IDE?
  1. {% set video = block.video %}
  2. <section class="container container-sm content-block js-fade-in {{ styleModifier | default(null) }}">
  3.     {{ include('Includes/title-block.html.twig', {
  4.         title: block.headline,
  5.         subtitle: block.subtitle,
  6.         isCentered: true
  7.     }) }}
  8.     {% if video.type == 'asset' %}
  9.         {% set options = {
  10.             'imagethumbnail': 'video-overlay',
  11.             'width': '100%',
  12.             'height': '100%',
  13.             'attributes': {
  14.                 'muted' :'true',
  15.                 'controls': 'controls',
  16.                 'preload': 'none',
  17.                 'class': 'video-js js-video-js js-lazy-iframe js-play-video__video embed-responsive-item'
  18.             }
  19.         } %}
  20.         {% set video =  elements_videoHelper().getVideoTag(video, options) %}
  22.         <div class="video-overlay__wrapper js-play-video">
  23.             <div class="video-overlay embed-responsive embed-responsive-16by9 js-play-video__overlay">
  24.                 <span class="icon icon-play video-overlay__icon" title="play" aria-label="play"></span>
  25.                 {% if video.posterAsset is instanceof('\\Pimcore\\Model\\Asset\\Image') %}
  26.                     {{ video.posterAsset.thumbnail('video-overlay').html({
  27.                         imgAttributes: {
  28.                             class: 'js-lazy-img embed-responsive-item'
  29.                         },
  30.                         lowQualityPlaceholder: true
  31.                     })|raw }}
  32.                 {% else %}
  33.                     <img src="{{ video.imageThumbnail('video-overlay') }}" class="js-lazy-img embed-responsive-item">
  34.                 {% endif %}
  35.             </div>
  37.             <div class="video-overlay__video embed-responsive embed-responsive-16by9">
  38.                 {{ video|raw }}
  39.                 {% do jsConfig().add('videoJs', true) %}
  40.             </div>
  42.         </div>
  44.     {% else %}
  45.         {% set options = {
  46.             'imagethumbnail': 'video-overlay',
  47.             'width': '100%',
  48.             'height': '100%',
  49.             'youtube': {
  50.                 'rel': 0,
  51.                 'showinfo': 0,
  52.                 'frameborder' : 0,
  53.                 'allow' : "autoplay; encrypted-media",
  54.                 'allowfullscreen' : true
  55.             },
  56.             'class': 'video-js js-video-js embed-responsive-item'
  57.         } %}
  58.         {% set video =  elements_videoHelper().getVideoTag(video, options) %}
  60.         {% if not editmode %}
  61.         <div class="">
  62.             {% embed('Layout/includes/consent-overlay.html.twig') with {
  63.                 'service': 'marketing',
  64.                 'buttonText': 'cookies.accept-marketing-cookies' |trans,
  65.                 'overlayText': 'cookies.accept-cookies-to-show-video'|trans,
  66.                 'classNames': {
  67.                     'wrapper': 'embed-responsive embed-responsive-16by9',
  68.                     'overlay': 'bg-light-bg d-flex justify-content-center flex-column align-items-center embed-responsive-item',
  69.                     'button': 'btn btn-primary-light mt-4 button-test',
  70.                     'template': '',
  71.                 },
  72.                 'jsClassNames': {
  73.                     'wrapper': 'js-consent',
  74.                     'overlay': 'js-consent__overlay',
  75.                     'button': 'js-consent__accept-btn',
  76.                     'template': 'js-consent__template',
  77.                 }
  78.             } %}
  80.                 {% block consentIframe %}
  81.                 <div class="video-area__video embed-responsive embed-responsive-16by9">
  82.                     {# add iframe or script to be wrapped here! #}
  83.                     {{ video|raw }}
  84.                 </div>
  85.                 {% endblock %}
  86.             {% endembed %}
  87.         </div>
  88.         {% endif %}
  90.     {% endif %}
  91. </section>