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) %}
  59.         <div class="video-area__video embed-responsive embed-responsive-16by9">
  60.             <div class="cookieconsent-optout-marketing embed-responsive-item bg-light-bg d-flex justify-content-center flex-column align-items-center">
  61.                 {{ 'cookies.accept-cookies-to-show-video' |trans }}
  62.                 <a class="btn btn-primary-light mt-4" href="javascript:Cookiebot.renew()">
  63.                     {{ 'cookies.accept-marketing-cookies' |trans }}
  64.                 </a>
  65.             </div>
  66.             {{ video|raw }}
  67.         </div>
  68.     {% endif %}
  69. </section>