Video Block: Decoration

{% macro video(url, width, height, attributes, lazyload) %}
	{% set sourceAttr = {
		'src': url,
		'type': 'video/mp4',
	} %}

	{% if lazyload %}
		<span style="padding-bottom: {{ height / width * 100 }}%;" class="video-placeholder"{% if lazyload %} data-source-attr='{{ sourceAttr|json_encode }}'{% endif %}></span>
		<noscript>
			<video{% for key, value in attributes|default({}) %} {{ key }}="{{ value }}"{% endfor %}>
				<source{% for key, value in sourceAttr %} {{ key }}="{{ value }}"{% endfor %}>
			</video>
		</noscript>
		<video{% for key, value in attributes|merge({ 'autoplay': 'false', 'preload': 'none' })|default({}) %} {{ key }}="{{ value }}"{% endfor %}>
			{% if lazyload != true %}
				<source{% for key, value in sourceAttr %} {{ key }}="{{ value }}"{% endfor %}>
			{% endif %}
		</video>
	{% else %}
		<video{% for key, value in attributes|default({}) %} {% if value == true %} {{ key }} {% endif %} {% endfor %}>
			<source{% for key, value in sourceAttr %} {{ key }}="{{ value }}"{% endfor %}>
		</video>
	{% endif %}
{% endmacro %}

{% import _self as macros %}

{# Defaults #}
{% set attributes = attributes is defined ? attributes : {
	'playsinline': 'true',
	'loop': 'true',
	'muted': 'true',
	'autoplay': 'true',
} %}

<div class="video{% if classes is defined and classes|length %} {{ classes|join(' ') }}{% endif %}">
	{# Multiple sources #}
	{% if sources is defined %}
		{% for breakpoint, source in sources|reverse %}
			<div class="video-source {{ breakpoint }}">
				{{ macros.video(source.url, source['width'] is defined ? source.width : null, source['height'] is defined ? source.height : null, (source.attributes ?: attributes), lazyload) }}
			</div>
		{% endfor %}
	{% endif %}

	{# Default video #}
	{% if url is defined %}
		{{ macros.video(url, width is defined ? width : null, height is defined ? height : null, attributes, lazyload) }}
	{% endif %}
</div>