{% extends 'layout-front.html.twig' %}

{% block extendsstylesheet %}
<style>
.video-panel{
	align-items: flex-start;
  display: flex;
  flex-flow: wrap;
  -moz-box-pack: start;
  justify-content: flex-start;
  margin: 48px 0px;
  width: 100%;
}
iframe:nth-child(4n+1) {
  margin-left: 0px;
}
 iframe {
  margin: 24px 0px 24px 24px;
    margin-left: 24px;
}

</style>
{% endblock %}

{% block content %}
	<div class="rubrique-header">
		<div class="sub-title">
			<h2>Bibliothèque</h2>
			<div class="title">
				<h1>Vidéos</h1>
				<div class="puce"></div>
			</div>
		</div>
	</div>
	
	<div class="row panel-videos">

		<div class="content">
		{% if arrVideos is not empty %}
			{% for video in arrVideos %}
			
			<iframe allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" frameborder="0" height="204" src="https://www.youtube.com/embed/{{ video.id }}" title="YouTube video player" width="298"></iframe>
				<br/>
			{% endfor %}
			
		{% endif %}
		<div class="row panel-videos">

	</div>

{% endblock %}