Display videos using Twig and the SUFramework theme API

videos.twig

<style>
	.homeVideos {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
		grid-gap: 1rem;
	}
	.responsiveIframe {
		height: 0;
		padding-bottom: 65%;
		position: relative;
	}
	.responsiveIframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
</style>

{% set videos = su.media.tagGroup("Group Name").tag("Tag Name") %}
{% set limit = 3 %}
{% set i = 0 %}

<div class="homeVideos">
{% for video in videos if "youtube" in video.assets[0].url and i < limit %}
	{% set videoId = video.assets[0].url|split( 'v=' )|last|split( '&' )|first %}
	
	<div class="video">
		<div class="responsiveIframe">
			<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ videoId }}" frameborder="0" 
				allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		</div>
		{% if video.title %}
		<h4><a  data-cke-saved-href="{{ video.assets[0].url }}" target="_blank" href="{{ video.assets[0].url }}" target="_blank">{{ video.title }}</a></h4>
		{% endif %}
		{% if video.description %}
		<p>{{ video.description }}</p>
		{% endif %}
	</div>
	
	{% set i = i + 1 %}
{% endfor %}
</div>