{#
{
"key": "framework_hero_video",
"category": "hero",
"label": "Hero (video)",
"description": "Toont een groot hero blok",
"allowMove": false,
"blocks": [
{
"key": "block-0",
"size": 12,
"required": "none",
"buttons": true,
"fields": [
{
"key": "title",
"type": "text",
"label": "Titel"
},
{
"key": "content",
"type": "textarea",
"label": "Content"
},
{
"key": "video",
"type": "text",
"label": "Video URL (link naar bestand vanuit media-bibliotheek)"
}
]
},
{
"key": "block-1",
"size": 12,
"required": "media",
"fields": []
}
]
}
#}
<section id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}" class="hero video {{wrapper.cssClass is defined ? wrapper.cssClass : ''}}">
<div class="videowrapper">
<div class="videocontainer">
{#
{% if wrapper.blocks[1].media %}
<div class="imagecontainer" style="background: url(/{{wrapper.blocks[1].media.getWebPath}}) no-repeat center; background-size: cover;"></div>
{% endif %}
#}
{% if firstBlock.config.video is not empty %}
<video playsinline="playsinline" muted="muted" controls loop class="video-js" autoplay="true" type="video/mp4" data-radium="true" {% if wrapper.blocks[1].media %} poster="/{{wrapper.blocks[1].media.getWebPath}}" {% endif %}>
<source data-src="{{firstBlock.config.video}}" type="video/mp4"/>
</video>
{# <script>
if ($(window).width() > 100) {
var sources = document.querySelectorAll('video.video-js source');
// Define the video object this source is contained inside
var video = document.querySelector('video.video-js');
for (var i = 0; i < sources.length; i++) {
sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// 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
video.load();
}
</script> #}
{% endif %}
</div>
<div class="titles">
<div class="vwrapper">
<div class="valign">
<div class="container">
<h1>{{firstBlock.config.title}}</h1>
{% if firstBlock.config.content is not empty %}
<div class="text">
{{firstBlock.config.content|raw}}
</div>
{% endif %}
{% for b in wrapper.blocks %}
{% if b.config.buttons is defined %}
{% for button in b.config.buttons %}
<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}}">
{{button.label}}
<i class="fa fa-angle-right"></i>
</a>
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>