templates/includes/media/video.html.twig line 1

Open in your IDE?
  1. {% set videoThumbnail = videoThumbnail|default(false) %}
  2. {% set video = video|default(false) %}
  3. {% set videoDescription = videoDescription|default('') %}
  4. {% set imageThumbnail = imageThumbnail|default(false) %}
  5. {% set image = image|default(false) %}
  6. {% set aspectRatio = aspectRatio|default('16x9') %}
  7. {% set className = className|default('video__container js-video') %}
  8. {% set videoClass = videoClass|default('') %}
  9. {% set attributes = attributes|default([]) %}
  10. {% set removeAttributes = removeAttributes|default([]) %}
  11. {% set isLightbox = isLightbox|default(false) %}
  13. {% if editmode and not video|default('') %}
  14.     {{ pimcore_video('video', {
  15.         'height': 500,
  16.         'allowedTypes': ['asset', 'youtube'],
  17.         'youtube': {
  18.             'modestbranding': true,
  19.         },
  20.     }) }}
  22.     Vorschaubild Youtube-Video:
  23.     {{ pimcore_image('video-preview') }}
  24. {% endif %}
  26. {% if not editmode %}
  27.     {% if not pimcore_video('video').isEmpty() or video != '' %}
  28.         {% set displayVideo = pimcore_video('video').isEmpty() ? video : pimcore_video('video') %}
  29.         {% if displayVideo.getType() != 'asset' %}
  30.             {% set config = {
  31.                 'thumbnail': videoThumbnail,
  32.                 'imagethumbnail': imageThumbnail,
  33.                 'width': '100%',
  34.                 'height': '100%',
  35.                 'attributes': {'class': 'asset-video js-video__video' ~ videoClass}|merge (attributes),
  36.                 'removeAttributes': removeAttributes
  37.             } %}
  38.         {% else %}
  39.             {% set config = {
  40.                 'thumbnail': videoThumbnail,
  41.                 'imagethumbnail': imageThumbnail,
  42.                 'width': '100%',
  43.                 'height': '100%',
  44.                 'attributes': {'class': 'ratio-item'},
  45.                 'removeAttributes': removeAttributes
  46.             } %}
  47.         {% endif %}
  49.         {% if image %}
  50.             {% do displayVideo.setPoster(image) %}
  51.         {% endif %}
  53.         {% if displayVideo is instanceof ('\\Pimcore\\Model\\Asset\\Video') %}
  54.             {% set displayVideo = elements_videoHelper().getVideoTag(displayVideo, config) %}
  55.         {% elseif displayVideo is instanceof ('\\Pimcore\\Model\\DataObject\\Data\\Video') %}
  56.             {% set displayVideo = elements_videoHelper().getVideoTag(displayVideo, config) %}
  57.         {% else %}
  58.             {% do displayVideo.setConfig(config) %}
  59.         {% endif %}
  61.         {% if isLightbox == true %}
  62.             {% do jsConfig().add('lightbox', true) %}
  63.             <div class="js-lightbox {{ className }} ratio ratio-{{ aspectRatio }}" data-lightbox-video="true">
  64.                 {% if displayVideo.getVideoType() == 'asset' %}
  65.                     {% set source = pimcore_asset(elements_videoHelper().getVideoUrl(displayVideo)) %}
  66.                     <a href="" data-video='{"source": [{"src":"{{ source.fullpath }}", "type":"{{ source.mimeType }}"}], "attributes": {"preload": false, "controls": true}}'
  67.                         class="ratio-item js-lightbox__item lg-html5 d-block" aria-label="{{ 'lightbox.video.Open'|trans }}" data-sub-html="{{ videoDescription }}">
  68.                         {% if image %}
  69.                             {% set image = image %}
  70.                         {% else %}
  71.                             {% set image = displayVideo.getPosterAsset() %}
  72.                         {% endif %}
  73.                         {% if image %}
  74.                             {{ image.getThumbnail('media-area').getHtml({
  75.                                 imgAttributes: {
  76.                                     class: 'js-lazy-img ratio-item media-video shadow'
  77.                                 },
  78.                                 lowQualityPlaceholder: true
  79.                             })|raw }}
  80.                             <button type="button" class="box-shadow-hover btn-play">
  81.                                 <span class="btn-play__icon icon icon-play" aria-label="{{ 'global.openVideoPlayer'|trans }}"></span>
  82.                                 <span class="btn-play__text">{{ 'global.playVideo'|trans }}</span>
  83.                             </button>
  84.                         {% endif %}
  85.                     </a>
  86.                 {% else %}
  87.                     {% set sourceExternalVideo = elements_videoHelper().getVideoUrl(displayVideo) %}
  88.                     {% set videoUrl = elements_videoHelper().getVideoUrl(displayVideo) %}
  89.                     {% set src = elements_videoHelper().getYoutubePoster(videoUrl|split('/')|last) %}
  90.                     {% if not pimcore_image('video-preview').isEmpty() %}
  91.                         {% set src = pimcore_image('video-preview').getThumbnail('media-area') %}
  92.                     {% endif %}
  94.                     {% embed('@ElementsCmsTools/consent-overlay.html.twig') with {
  95.                         'classNames': {
  96.                             'wrapper': 'consent ratio-item',
  97.                             'overlay': 'consent__overlay ratio-item',
  98.                             'template': 'ratio-item',
  99.                         },
  100.                         'service': 'marketing',
  101.                         'buttonText': 'cookies.Marketingcookies akzeptieren'|trans,
  102.                         'overlayText': 'cookies.Um das Video anzusehen, müssen Sie die Cookies akzeptieren'|trans
  103.                     } %}
  104.                         {% block consentIframe %}
  105.                                 <a href="" data-src="{{ sourceExternalVideo }}" class="js-lightbox__item ratio-item">
  106.                                     <img src="{{ src }}" class="ratio-item media-video shadow" alt="{{ videoDescription }}"/>
  107.                                     <button type="button" class="box-shadow-hover btn-play">
  108.                                         <span class="btn-play__icon icon icon-play" aria-label="{{ 'global.openVideoPlayer'|trans }}"></span>
  109.                                         <span class="btn-play__text">{{ 'global.playVideo'|trans }}</span>
  110.                                     </button>
  111.                                 </a>
  112.                         {% endblock %}
  113.                     {% endembed %}
  114.                 {% endif %}
  115.             </div>
  116.         {% else %}
  117.             <div class="d-block {{ className }} {{ aspectRatio ? 'ratio ratio-' ~ aspectRatio }}">
  119.                 {% if displayVideo.getVideoType()|default(displayVideo.getType()) == 'asset' %}
  121.                     {{ displayVideo|raw }}
  123.                     <button type="button" class="box-shadow-hover btn-play">
  124.                         <span class="btn-play__icon icon icon-play" aria-label="{{ 'global.openVideoPlayer'|trans }}"></span>
  125.                         <span class="btn-play__text">{{ 'global.playVideo'|trans }}</span>
  126.                     </button>
  128.                 {% else %}
  129.                     {% embed('@ElementsCmsTools/consent-overlay.html.twig') with {
  130.                         'service': 'marketing',
  131.                         'buttonText': 'cookies.Marketingcookies akzeptieren'|trans,
  132.                         'overlayText': 'cookies.Um das Video anzusehen, müssen Sie die Cookies akzeptieren'|trans
  133.                     } %}
  134.                         {% block consentIframe %}
  135.                             {{ displayVideo|raw }}
  136.                         {% endblock %}
  137.                     {% endembed %}
  138.                 {% endif %}
  139.             </div>
  140.         {% endif %}
  141.     {% endif %}
  142. {% endif %}