src/CmsBundle/Resources/views/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
  43. class="hero video {{wrapper.classList}}"
  44. id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}"
  45. style="{{wrapper.styleList}}"
  46. data-id="{{wrapper.id}}">
  48.   <div class="videowrapper">
  49.     <div class="videocontainer">
  50.       {% if wrapper.blocks[1].media is not empty %}
  51.         <div class="lcp lcp-bg">
  52.           {% if wrapper.blocks[1].media.hasBlurred %}
  53.             <picture>
  54.               {% if wrapper.blocks[1].media.hasWebp() %}
  55.                 <source srcset="/{{wrapper.blocks[1].media.getBlurredWebpPath('large')}}" type="image/webp">
  56.               {% endif %}
  57.               <source srcset="/{{wrapper.blocks[1].media.getBlurredWebPath('large')}}" type="{{wrapper.blocks[1].media.mime}}">
  58.               <img class="lq" alt="{{wrapper.blocks[1].media.description_alt}}" src="/{{wrapper.blocks[1].media.getBlurredWebPath('large')}}" type="{{wrapper.blocks[1].media.mime}}" loading="lazy" width="{{wrapper.blocks[1].media.width}}" height="{{wrapper.blocks[1].media.height}}">
  59.             </picture>
  60.           {% endif %}
  61.           <picture>
  62.             {% if wrapper.blocks[1].media.hasWebp() %}
  63.               <source srcset="/{{wrapper.blocks[1].media.getWebpPath('full')}}" type="image/webp">
  64.             {% endif %}
  65.             <source srcset="/{{wrapper.blocks[1].media.getWebPath('full')}}" type="{{ wrapper.blocks[1].media.mime }}">
  66.           <img class="hq" alt="{{wrapper.blocks[1].media.description_alt}}" src="/{{wrapper.blocks[1].media.getWebPath('full')}}" type="{{wrapper.blocks[1].media.mime}}" loading="lazy" width="{{wrapper.blocks[1].media.width}}" height="{{wrapper.blocks[1].media.height}}" onload="this.style.opacity=1{% if wrapper.blocks[1].media.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  67.           </picture>
  68.         </div>
  69.       {% endif %}
  71.       {% if firstBlock.config.video is not empty %}
  72.         <video playsinline="playsinline" muted="muted" loop="" autoplay="true" type="video/mp4" data-radium="true" {% if wrapper.blocks[1].media %} poster="" {% endif %}>
  73.           <source src="{{firstBlock.config.video}}" type="video/mp4">
  74.         </video>
  75.       {% endif %}
  76.     </div>
  78.     <div class="titles">
  79.       <div class="vwrapper">
  80.         <div class="valign">
  81.           <div class="container {{ firstBlock.class }}">
  82.             <h1>{{firstBlock.config.title}}</h1>
  84.             {% if firstBlock.config.content is not empty %}
  85.               <div class="text">
  86.                 {{firstBlock.config.content|raw}}
  87.               </div>
  88.             {% endif %}
  90.             {% for b in wrapper.blocks %}
  91.               {% if b.config.buttons is defined %}
  92.                 <div class="btns">
  93.                 {% for button in b.config.buttons %}
  94.                   <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}}">
  95.                     {{button.label}}
  96.                     <i class="fa fa-arrow-right"></i>
  97.                   </a>
  98.                 {% endfor %}
  99.                 </div>
  100.               {% endif %}
  101.             {% endfor %}
  102.           </div>
  103.         </div>
  104.       </div>
  105.     </div>
  106.   </div>
  107. </section>