templates/module/Video/__video.html.twig line 1

Open in your IDE?
  1. {% if editmode %}
  3.     {{ include('includes/backend-kopf.html.twig') }}
  5.     {% set tabContentArray = {1: 'Optional', 2: 'Video'} %}
  6.     {% set tab = 1 %}
  8.     <div id="content">        
  9.             {% if tabContentArray is defined and tab in tabContentArray|keys %}
  10.                 {{ admin_tabs(tab, tabContentArray) | raw }}
  11.             {% endif %} 
  12.             <section class="tabContent">
  14.                 <p class="hl">Optionale Einstellung:</p>
  15.                 {% set element = 'artikel' %}
  16.                 <div id="{{ element }} ">
  17.                     {{ pimcore_multiselect(element, {
  18.                             'width': 200,
  19.                             'height': 100,
  20.                             'store': [
  21.                                 ['abstand-top', 'Abstand nach oben'],
  22.                                 ['abstand-bottom', 'Abstand nach unten']
  23.                             ]
  24.                         }) }}
  25.                 </div>
  27.             </section>
  29.             {% if tabContentArray is defined and 2 in tabContentArray|keys %}
  30.                 {{ admin_tabs(2, tabContentArray) | raw }}
  32.                 <section class="tabContent">
  33.                     <table border="0" cellspacing="0" cellpadding="0"><tr><td>
  35.                             <div style="padding:7px;margin-bottom:25px; background-color:#74b9d9;color:#ffffff;"> Video Konfiguration</div>
  38.                             <div style="width:100%;">
  40.                                 <div style="padding-left:37px;margin-bottom:4px;margin-top:8px;">Bitte wählen Sie:</div>
  42.                                 <div style="padding-left:37px;margin-bottom:10px;">
  44.                                     {% if pimcore_select('videoFormatSelect').isEmpty() %}
  45.                                         {% do pimcore_select('videoFormatSelect').setDataFromResource('---') %}
  46.                                     {% endif %}
  48.                                       {{ pimcore_select("videoFormatSelect", {
  49.                                             "store": [
  50.                                                 ["videodatei", "Video-Datei"],
  51.                                                 ["youtube", "Youtube"]
  52.                                             ],
  53.                                             "reload" : true
  54.                                         }) }}
  56.                                 </div>
  58.                                 {% set AusgabevideoFormatSelect = pimcore_select("videoFormatSelect").getData() %}
  60.                                  {% set youtube = AusgabevideoFormatSelect == 'youtube' ? 'block' : 'none' %}
  63.                                 <div style="display:{{ youtube }};">
  65.                                     <div style="padding-left:37px;margin-bottom:4px;margin-top:30px;">Bitte Youtube Video-Key in das Feld übertragen:</div>
  66.                                     <div class="schreiben"><span class="parentbox">
  67.                                         {{ pimcore_input("youtubeKey", {'width': 540, "height": 25}) }}
  68.                                         </span></div>
  69.                                     <br /><br />
  71.                                 </div>
  72.                                  {% set videodatei = AusgabevideoFormatSelect == 'videodatei' ? 'block' : 'none' %}
  74.                                 <div style="display:{{ videodatei }}">
  76.                                     <div style="padding-left:37px;margin-bottom:4px;margin-top:30px;">Video 'mp4' - Format:</div>
  77.                                     <div class="dragdrop"><span class="parentbox">
  78.                                     {{ pimcore_relation("PfadMp4",{
  79.                                             "width": 520,
  80.                                             "reload": true
  81.                                         }) }}</span></div>
  83.                                     <br /><br />
  85.                                     <div style="padding-left:37px;margin-bottom:4px;">Video 'webm' - Format:</div>
  86.                                     <div class="dragdrop"><span class="parentbox">
  87.                                     {{ pimcore_relation("PfadWebm",{
  88.                                             "width": 520,
  89.                                             "reload": true
  90.                                         }) }}
  91.                                     </span></div>
  94.                                     <br /><br /><br /><hr /><br /><br />
  97.                                     <div style="padding-left:37px;margin-bottom:4px;">Video Startbild (2400 x 1360 Pixel):</div>
  98.                                     <div style="width:520px;">
  99.                                         <div style="float:left;margin-bottom:10px;" class="dragimage"><span class="parentbox">
  100.                                             {{ pimcore_image("posterImage", {
  101.                                                 "width": 100,
  102.                                                 "height": 67,
  103.                                                 "hidetext": true,
  104.                                                 "thumbnail": "singleImage-edm"
  105.                                             }) }}
  106.                                             </span>
  107.                                         </div>
  109.                                     </div>
  111.                                 </div>
  114.                         </td></tr>
  115.                 </table>
  117.                 <br /><br /><br /><br />
  119.             </section>
  120.             {% endif %}
  121.     </div>
  122.     {{ include('includes/backend-fuss.html.twig') }}
  124. {% else %}
  126.     {% set abstand_top_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-top') == true)? ' abstand-top' : '' %}
  127.     {% set abstand_bottom_class = (checkMultiselect(pimcore_multiselect("artikel"),'abstand-bottom') == true)? ' abstand-bottom' : '' %}
  129.     {% set abstandClasses = abstand_top_class ~ abstand_bottom_class %}
  131.     {% set IDself = document.getId() %}
  133.     <div class="module-video constrainer-inner edgepadding {{ abstandClasses }}">
  134.         <div class="video-wrp">
  136.             <div data-video="{{ IDself }}">
  138.             <div class="video-item">
  140.                  {% set AusgabevideoFormatSelect = pimcore_select("videoFormatSelect").getData() %}
  141.                 {% if AusgabevideoFormatSelect != "---" %}
  143.                     {% if AusgabevideoFormatSelect == "youtube" %}
  144.                         <iframe class="videoextern" width="1600" height="900" 
  145.                                 src="https://www.youtube.com/embed/{{ pimcore_input('youtubeKey') }}?rel=0" frameborder="0" allowfullscreen></iframe>
  146.                     {% endif %}
  149.                     {% if AusgabevideoFormatSelect == "videodatei" %}
  150.                         {% set thumbnail = pimcore_image("posterImage").getThumbnail("videoposter") %}
  151.                         <video class="videoextern" id='videoplayer_{{ IDself }}' preload='metadata' controls poster="{{ thumbnail }}">
  152.                             <source src="{{ bugfiximageurl }} {{ pimcore_relation("PfadMp4").getFullPath()|trim }}" type='video/mp4' />
  153.                             <source src="<?=$bugfiximageurl?>{{ pimcore_relation("PfadWebm").getFullPath()|trim }}" type='video/webm' />
  154.                         </video>
  155.                     {% endif %}
  157.                 {% endif %}
  158.             </div>
  159.             
  160.             </div>
  162.         </div>
  163.     </div>
  165.     {% if AusgabevideoFormatSelect == "videodatei" %}
  166.         <script>
  167.             //------------------------------------------------------------------------------------------------
  168.             // Video einbinden
  169.             //------------------------------------------------------------------------------------------------
  170.             (function () {
  171.                 var video = $("#videoplayer_{{ IDself }}");
  172.                 var windowObj = $(window);
  174.                 if (typeof selt === 'undefined') {
  175.                     selt = {
  176.                         modules: {}
  177.                     };
  178.                 } else if (!selt.modules) {
  179.                     selt.modules = {};
  180.                 }
  182.                 selt.modules[moduleName] = {
  183.                     name: moduleName,
  184.                     init: function () {
  185.                         video.on("loadedmetadata", onLoadMetaData);
  186.                         windowObj.resize(onResizeWindow);
  187.                     }
  188.                 };
  190.                 function onResizeWindow() {
  191.                     resizeVideo(video[0]);
  192.                 }
  194.                 function onLoadMetaData(e) {
  195.                     resizeVideo(e.target);
  196.                 }
  198.                 function resizeVideo(videoObject) {
  199.                     var percentWidth = videoObject.clientWidth * 100 / videoObject.videoWidth;
  200.                     var videoHeight = videoObject.videoHeight * percentWidth / 100;
  201.                     video.height(videoHeight);
  202.                 }
  203.             }());//EOS
  204.         </script>
  206.     {% endif %}
  208. {% endif %}