more_fields-2.2.19/templates/more-fields-video-player-with-type-formatter.html.twig

{# /** * @file * Default theme implementation to display a formatted
video field. * * Available variables: * - items: A collection of videos.
* - player_attributes: Player options including the following: * -
width: The width of the video (if known). * - height: The height of the
video (if known). * - autoplay: Autoplay on or off * * @ingroup
themeable */ #}
<figure class="video-container">
	<video {{video_attributes.addClass('d-flex')}}>
		{% for item in items %}
		<source src="{{ item.src }}" type="{{ item.filemime }}" />
		{% endfor %}
	</video>
	{% if all_settings.control_js %}
	<div class="elt-controls justify-content-center align-items-center" data-settings={{ settings }}>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
			width="6rem" height="6rem" class="play"> <path
				d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9l0-176c0-8.7 4.7-16.7 12.3-20.9z" /></svg>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"
			width="6rem" height="6rem" class="pause"> <path
				d="M48 64C21.5 64 0 85.5 0 112L0 400c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48L48 64zm192 0c-26.5 0-48 21.5-48 48l0 288c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-288c0-26.5-21.5-48-48-48l-32 0z" /></svg>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="3rem" height="3rem" class="bottom volume-high"> <path d="M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64l0 384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352 64 352c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l67.8 0L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"/></svg>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="3rem" height="3rem" class="bottom volume-off">  <path d="M320 64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L131.8 160 64 160c-35.3 0-64 28.7-64 64l0 64c0 35.3 28.7 64 64 64l67.8 0L266.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S320 460.6 320 448l0-384z"/></svg>
	</div>
	{% endif %}
</figure>