templates/blocks/framework_hero_video.html.twig line 1

Open in your IDE?
  1. {#
  2.     {
  3.         "key": "framework_hero_video",
  4.         "category": "Framework",
  5.         "label": "Hero (Video)",
  6.         "description": "...",
  7.         "allowMove": false,
  8.         "blocks": [
  9.             {
  10.                 "key": "block-0",
  11.                 "size": 12,
  12.                 "required": "none",
  13.                 "buttons": true,
  14.                 "fields": [
  15.                     {
  16.                         "key": "title",
  17.                         "type": "text",
  18.                         "label": "Titel"
  19.                     },
  20.                     {
  21.                         "key": "content",
  22.                         "type": "textarea",
  23.                         "label": "Content"
  24.                     },
  25.                     {
  26.                         "key": "video",
  27.                         "type": "text",
  28.                         "label": "Video URL (link naar bestand vanuit media-bibliotheek)"
  29.                     }
  30.                 ]
  31.             },
  32.             {
  33.                 "key": "block-1",
  34.                 "size": 12,
  35.                 "required": "media",
  36.                 "fields": []
  37.             }
  38.         ]
  39.     }
  40. #}
  42. <section id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}" class="hero video {{wrapper.cssClass is defined ? wrapper.cssClass : ''}}" style="{% if wrapper.bgColor %}background-color: {{wrapper.bgColor}};{% endif %}">
  43.   <div class="videowrapper">
  44.     <div class="videocontainer">
  45.       {#
  46.       {% if wrapper.blocks[1].media %}
  47.         <div class="imagecontainer" style="background: url(/{{wrapper.blocks[1].media.getWebPath}}) no-repeat center; background-size: cover;"></div>
  48.       {% endif %}
  49.       #}
  51.       {% if firstBlock.config.video is not empty %}
  52.         <video playsinline="playsinline" muted="muted" class="video-js" loop="" autoplay="true" type="video/mp4" data-radium="true" {% if wrapper.blocks[1].media %} poster="/{{wrapper.blocks[1].media.getWebPath}}" {% endif %}>
  53.           <source data-src="{{firstBlock.config.video}}" type="video/mp4"/>
  54.         </video>
  55.         <script>
  56.           if ($(window).width() > 768) {
  57.             var sources = document.querySelectorAll('video.video-js source');
  58.             // Define the video object this source is contained inside
  59.             var video = document.querySelector('video.video-js');
  60.             for (var i = 0; i < sources.length; i++) {
  61.               sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
  62.             }
  63.             // If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
  64.             video.load();
  65.           }
  66.         </script>
  67.       {% endif %}
  68.     </div>
  70.     <div class="titles">
  71.       <div class="vwrapper">
  72.         <div class="valign">
  73.           <div class="container">
  74.             <h1>{{firstBlock.config.title}}</h1>
  76.             {% if firstBlock.config.content is not empty %}
  77.               <div class="text">
  78.                 {{firstBlock.config.content|raw}}
  79.               </div>
  80.             {% endif %}
  82.             {% for b in wrapper.blocks %}
  83.                 {% if b.config.buttons is defined %}
  84.                 <div class="btns">
  85.                   {% for button in b.config.buttons %}
  86.                     <a href="{{button.url}}" {% if button.target is defined and button.target != 'null' and button.target is not empty %} target="{{button.target}}" {% endif %} class="btn {{button.class}}">
  87.                       {{button.label}}
  88.                       <i class="fa fa-angle-right"></i>
  89.                     </a>
  90.                   {% endfor %}
  91.                 </div>
  92.                 {% endif %}
  93.             {% endfor %}
  94.           </div>
  95.         </div>
  96.       </div>
  97.     </div>
  98.   </div>
  99. </section>