templates/areas/media-video/view.html.twig line 1

Open in your IDE?
  1. <section class="content-block container container-sm js-fade-in {{ include('Layout/includes/editmode-box-classes.html.twig') }} {{ styleModifier | default(null) }} {{ not pimcore_input('anchorTitle').empty ? 'js-anchor-nav__item' : '' }}" {% if not pimcore_input('anchorTitle').empty %}data-anchor-nav-title="{{ pimcore_input('anchorTitle').frontend }}"{% endif %}>
  2.     {% embed 'Includes/editmode-settings.html.twig' %}
  3.         {% block additionalInfo %}
  4.             <div>
  5.                 <label>
  6.                     {{ pimcore_checkbox('titleBlockCentered') }} Center Headline?
  7.                 </label>
  8.             </div>
  9.         {% endblock %}
  10.     {% endembed %}
  11.     {{ include('Includes/title-block-editable.html.twig') }}
  12.     
  13.     {% if not editmode and pimcore_video('video').videoType == 'asset' %}
  14.         <div class="video-overlay__wrapper js-play-video">
  15.             <div class="video-overlay embed-responsive embed-responsive-16by9 js-play-video__overlay">
  16.                 <span class="icon icon-play video-overlay__icon" title="play" aria-label="play"></span>
  17.                 {% if pimcore_video('video').posterAsset is instanceof('\\Pimcore\\Model\\Asset\\Image') %}
  18.                     {{ pimcore_video('video').posterAsset.thumbnail('video-overlay').html({
  19.                         imgAttributes: {
  20.                             class: 'js-lazy-img embed-responsive-item',
  21.                         },
  22.                         lowQualityPlaceholder: true
  23.                     })|raw }}
  24.                 {% else %}
  25.                     <img src="{{ pimcore_video('video').imageThumbnail('video-overlay') }}" class="js-lazy-img embed-responsive-item">
  26.                 {% endif %}
  27.             </div>
  28.             
  29.             <div class="video-overlay__video embed-responsive embed-responsive-16by9">
  30.                 {{ pimcore_video('video', {
  31.                     'attributes' : {
  32.                         'class' : 'video-js js-video-js js-lazy-iframe js-play-video__video embed-responsive-item'
  33.                     }
  34.                 }) }}
  35.                 {% do jsConfig().add('videoJs', true) %}
  36.             </div>
  37.         
  38.         </div>
  39.     {% else %}
  40.         
  41.         {% if editmode %}
  42.             {{ pimcore_video('video', {
  43.                 'attributes' : {
  44.                     'class' : 'video-js js-video-js embed-responsive-item'
  45.                 }
  46.             }) }}
  47.         {% else %}
  48.             {% set src = '' %}
  49.             {% if pimcore_video('video').videoType == 'youtube' %}
  50.                 {% set src = 'https://www.youtube.com/embed/' %}
  51.             {% elseif pimcore_video('video').videoType == 'vimeo' %}
  52.                 {% set src = 'https://player.vimeo.com/video/' %}
  53.             {% elseif pimcore_video('video').videoType == 'dailymotion' %}
  54.                 {% set src = 'https://www.dailymotion.com/embed/video/' %}
  55.             {% endif %}
  56.             {% set src = src ~ pimcore_video('video').id %}
  57.             
  58.             <div class="video-area__video {{ editmode ? '' : 'embed-responsive embed-responsive-16by9' }} js-consent-overlay" data-consent-type="marketing">
  59.                 <div class="js-consent-overlay__overlay consent-overlay embed-responsive-item bg-light-bg d-flex justify-content-center flex-column align-items-center">
  60.                     {{ 'cookies.accept-cookies-to-show-video' |trans }}
  61.                     <button type="button" class="btn btn-primary-light mt-4 js-consent-overlay__btn">
  62.                         {{ 'cookies.accept-marketing-cookies' |trans }}
  63.                     </button>
  64.                 </div>
  65.                 
  66.                 <iframe class="embed-responsive-item js-consent-overlay__iframe"
  67.                         src=""
  68.                         frameborder="0"
  69.                         data-iframe-src="{{ src }}"
  70.                         allowfullscreen>
  71.                 </iframe>
  72.             </div>
  73.         {% endif %}
  74.     {% endif %}
  76. </section>