src/CoreBundle/Resources/views/Areas/VideoContainer/view.html.twig line 1

Open in your IDE?
  1. {% set spacingSelect %}
  2.     {{ pimcore_checkbox("checkSpacing", {
  3.         "reload": true
  4.     }) }}
  5. {% endset %}
  6. {% set noSpacingTop = '' %}
  7. {% set brickAnchorId = '' %}
  8. {% if pimcore_checkbox('checkSpacing').isChecked() %}
  9.     {% set noSpacingTop = 'no-offset-top' %}
  10. {% endif %}
  11. {% set UID = uniqid() %}
  12. <div id="{{ brickAnchorId }}" class="section {{ noSpacingTop }} video-wrapper">
  13.     <div id="{{ 'uid' ~ UID |raw }}" class="video-container with-overlay">
  14.         {% if editmode %}
  15.             <div class="flex-col offset-bottom-single">
  16.                 <div class="col xs-12 m-6 l-3">
  17.                     <span class="hint">{{ 'Youtube ID eingeben' |trans }}</span>
  18.                     {{ pimcore_input("youtubeID", {
  19.                         "width": 300,
  20.                         "reload": true
  21.                     }) }}
  22.                 </div>
  23.                 <div class="col xs-12 m-6 l-3">
  24.                     <span class="hint">{{ 'Bitte wählen Sie ein Overlay-Bild aus' |trans }}</span>
  25.                     <div class="image">
  26.                         {{ pimcore_image("iframeOverlay", {
  27.                             "title": "Drag your image here",
  28.                             "width": 300,
  29.                             "height": 150,
  30.                             "thumbnail": "iframeOverlay" ~ bundleName,
  31.                             "reload": true
  32.                         }) }}
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.         {% endif %}
  37.         {% if pimcore_image("iframeOverlay") is not empty %}
  38.             <div class="overlay-close icon close">
  39.             </div>
  40.             {% set videoIDResult = pimcore_input("youtubeID") %}
  41.             <div class="video-wrapper">
  42.                 <div class="iframe-container {{ videoIDResult }}">
  43.                     <div id="{{ videoIDResult }}" class="mute-yt-player-container" data-video-id-result="{{ videoIDResult }}"></div>
  44.                 </div>
  45.             </div>
  46.             {% if pimcore_image("iframeOverlay").getThumbnail("iframeOverlay") is not empty %}
  47.                 <div class="image video-overlay">
  48.                     <div class="play-button-container">
  49.                         <h2>{{ 'Play Video' |trans }}</h2>
  50.                         <span class="icon play-button"></span>
  51.                     </div>
  52.                     {{ pimcore_image("iframeOverlay").getThumbnail("iframeOverlay" ~ bundleName).getHTML() |raw }}
  54.                     {#IE Fix for thumbnails rendering start#}
  55.                     <script type='text/javascript'>
  56.                         var waitForJQuery = setInterval(function () {
  57.                             if (typeof $ != 'undefined') {
  58.                                 $(function() {
  59.                                     if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ){
  61.                                         $(".video-container .image.video-overlay").css({
  62.                                             width: "100%",
  63.                                             height: "500px",
  64.                                             background: "url( {{ pimcore_image("iframeOverlay").getSrc() }} ) center right 100%/cover no-repeat"
  65.                                         });
  66.                                         $(".video-container .image.video-overlay img").hide();
  67.                                     }
  68.                                 });
  69.                                 clearInterval(waitForJQuery);
  70.                             }
  71.                         }, 50);
  72.                     </script>
  73.                     {#IE Fix for thumbnails rendering end#}
  74.                     
  75.                 </div>
  76.             {% endif %}
  77.         {% endif %}
  78.     </div>
  79. </div>