custom/plugins/TcinnThemeWareModern/src/Resources/views/storefront/themeware/product-detail/twt-product-videos.html.twig line 1

Open in your IDE?
  1. {# ThemeWare "Product videos" on product pages via custom fileds #}
  2. {#
  3.     Create container and add product videos
  5.     @Storefront/storefront/themeware/product-detail/twt-product-videos.html.twig
  6. #}
  8. {# ThemeWare: Add product videos #}
  9. {% block twt_product_detail_videos %}
  10.     <div class="twt-product-detail-videos twt-videos">
  11.         {% block twt_product_detail_videos_inside %}
  13.             {# ThemeWare: Add title (only in tab "Description") #}
  14.             {% block twt_product_detail_videos_title %}
  15.                 {% if position == "description" %}
  16.                     {% if twtCustomFields.product.twt_modern_pro_custom_field__product__youtube_video is not empty or twtCustomFields.product.twt_modern_pro_custom_field__product__vimeo_video is not empty %}
  17.                         <div class="h5 twt-product-detail-product-videos-title">
  18.                             {{ 'twt.detail.customFields.productVideos.title'|trans }}
  19.                         </div>
  20.                     {% endif %}
  21.                 {% endif %}
  22.             {% endblock %}
  24.             {# ThemeWare: YouTube-Video(s) #}
  25.             {# TODO: Add configuration (Steuerelemente, Erweiterter Datenschutz, ...) #}
  26.             {# <iframe width="560" height="315" src="https://www.youtube.com/embed/aVw60mnS21o?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> #}
  27.             {# Standard         <iframe src="https://www.youtube.com/embed/aVw60mnS21o?controls=0" ...> #}
  28.             {# +Steuerelemente  <iframe src="https://www.youtube.com/embed/aVw60mnS21o" ... #}
  29.             {# +Datenschutz     <iframe src="https://www.youtube-nocookie.com/embed/aVw60mnS21o?controls=0" ... #}
  30.             {% block twt_product_detail_videos_youtube %}
  31.                 {% if twtCustomFields.product.twt_modern_pro_custom_field__product__youtube_video is not empty %}
  32.                     {% set youtubeIDs = twtCustomFields.product.twt_modern_pro_custom_field__product__youtube_video|split(',') %}
  34.                     <div class="twt-product-detail-product-videos-container">
  35.                         {% for youtubeID in youtubeIDs %}
  36.                             {% block twt_product_detail_videos_youtube_embed %}
  37.                                 <div class="twt-product-video is-youtube embed-responsive embed-responsive-16by9" itemprop="video"> {# 16:9 aspect ratio #}
  38.                                     <div class="responsive-video">
  39.                                         <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/{{ youtubeID|trim }}" frameborder="0" allowfullscreen></iframe>
  40.                                     </div>
  41.                                 </div>
  42.                             {% endblock %}
  43.                         {% endfor %}
  44.                     </div>
  45.                 {% endif %}
  46.             {% endblock %}
  48.             {# ThemeWare: Vimeo-Video(s) #}
  49.             {# TODO: Add configuration (Autoplay, ...) #}
  50.             {# <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/213807531?color=ffffff&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> #}
  51.             {# Standard:    <iframe src="https://player.vimeo.com/video/213807531?... #}
  52.             {# Autoplay:    <iframe src="https://player.vimeo.com/video/213807531?autoplay=1... #}
  53.             {% block twt_product_detail_videos_vimeo %}
  54.                 {% if twtCustomFields.product.twt_modern_pro_custom_field__product__vimeo_video is not empty %}
  55.                     {% set vimeoIDs = twtCustomFields.product.twt_modern_pro_custom_field__product__vimeo_video|split(',') %}
  57.                     <div class="twt-product-detail-product-videos-container">
  58.                         {% for vimeoID in vimeoIDs %}
  59.                             {% block twt_product_detail_videos_vimeo_embed %}
  60.                                 <div class="twt-product-video is-vimeo embed-responsive embed-responsive-16by9" itemprop="video"> {# 16:9 aspect ratio #}
  61.                                     <div class="responsive-video">
  62.                                         <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/{{ vimeoID|trim }}?color=ffffff&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  63.                                         {#<script src="https://player.vimeo.com/api/player.js"></script>#}
  64.                                     </div>
  65.                                 </div>
  66.                             {% endblock %}
  67.                         {% endfor %}
  68.                     </div>
  69.                 {% endif %}
  70.             {% endblock %}
  72.         {% endblock %}
  73.     </div>
  74. {% endblock %}