Better media page

_includes/layouts/default.njk

@@ -59,7 +59,7 @@ article: null
         {% endfor %}
       {% endif %}
 
-      {% if media %}
+      {% if mediaProjects %}
         {% include "media.njk" %}
       {% endif %}
 

_includes/media.njk

@@ -1,26 +1,33 @@
-<section
+{% for project in mediaProjects %}
-  id="media"
+  <h1>{{ project.title }}</h1>
-  class="media"
->
-  {% for medium in media %}
-    <h2>{{ medium.title }}</h2>
 
-    {% if medium.id %}
+  {{ project.article | md | safe }}
-      <figure class="media-iframe-parent">
+
-        <iframe
+  <section
-          class="media-iframe"
+    id="media"
-          src="https://www.youtube.com/embed/{{ medium.id }}"
+    class="media"
-          title="YouTube video player"
+  >
-          frameborder="0"
+    {% for medium in project.media %}
-          allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
+      <h2>{{ medium.title }}</h2>
-          allowfullscreen
+
-        ></iframe>
+      {% if medium.id %}
-      </figure>
+        <figure class="media-iframe-parent">
-    {% elif medium.src %}
+          <iframe
-      <video class="media-video" controls>
+            class="media-iframe"
-        <source src="{{ medium.src }}" type="video/mp4">
+            src="https://www.youtube.com/embed/{{ medium.id }}"
-        Dein Browser unterstützt leider keine Videos
+            title="YouTube video player"
-      </video>
+            frameborder="0"
-    {% endif %}
+            allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
-  {% endfor %}
+            allowfullscreen
-</section>
+          ></iframe>
+        </figure>
+      {% elif medium.src %}
+        <video class="media-video" controls>
+          <source src="{{ medium.src }}" type="video/mp4">
+          Dein Browser unterstützt leider keine Videos
+        </video>
+      {% endif %}
+    {% endfor %}
+  </section>
+
+{% endfor %}

medien/index.yml

@@ -9,38 +9,38 @@ pageImage:
   src: kino
   description: Italienisch-türkisches Kino im Kölner Eigelstein/Weidengasse, 1982, Guenay Ulutuncok / DOMiD-Archiv, Köln
 
-article: "
+mediaProjects:
-## Benim Müzem – Mein Museum
+  - title: Benim Müzem – Mein Museum
-
+    article: "
 Ein Videoprojekt von Museumsdienst Köln und dem Amt für Integration und Vielfalt
 
 
 In drei Kurzfilmen gibt das Videoprojekt einen Einblick in den Arbeitsalltag von drei Menschen, die in den oder für die städtischen Museen in Köln arbeiten. Sie berichten von ihrer Beziehung zum Museum oder seinen Objekten und sprechen darüber, wie sie ihre Mehrsprachigkeit in der Arbeit einsetzen.
+    "
 
+    media:
+      - title: Ertan Özcan
+        src: /videos/Ertan_MD_25.10.21.mp4
+      - title: Ipek Sirena Krutsch
+        src: /videos/Ipek_MD_25.20.21.mp4
+      - title: Kezban Tursun
+        src: /videos/Kezban_MD_25.10.21.mp4
 
-## Der Geschichte Ein Gesicht Geben – Und Namen
+  - title: Der Geschichte Ein Gesicht Geben – Und Namen
-
+    article: "
 Ein Videoprojekt von In-Haus e.V. und der AWO Mittelrhein
 
 
 60 Jahre Anwerbeabkommen zur Entsendung von Arbeitskräften aus der Türkei nach Deutschland Vielen Dank an alle, die ihre Geschichte mit uns geteilt haben. Und danke an Nuran Kançok, Vural Çeliker, Ayşe Und Levent Seyhan vom AWO Bezirksverband Mittelrhein e.V. für die Unterstützung.
-"
+    "
-
+    media: 
-media:
+      - title: Ayşe Und Levent Seyhan
-  - title: Ayşe Und Levent Seyhan
+        id: Qr-_B3j99dE
-    id: Qr-_B3j99dE
+      - title: Vural Çeliker
-  - title: Vural Çeliker
+        id: WQPZh7RWqtI
-    id: WQPZh7RWqtI
+      - title: Nejla Ocak
-  - title: Nejla Ocak
+        id: xUwNO2FwqI8
-    id: xUwNO2FwqI8
+      - title: Fatma und Ahmet Görgülü
-  - title: Fatma und Ahmet Görgülü
+        id: 1DDoJ3-bXq0
-    id: 1DDoJ3-bXq0
+      - title: Turan Özkücük
-  - title: Turan Özkücük
+        id: 8Id6f6meCRw
-    id: 8Id6f6meCRw
-  - title: Ertan Özcan
-    src: /videos/Ertan_MD_25.10.21.mp4
-  - title: Ipek Sirena Krutsch
-    src: /videos/Ipek_MD_25.20.21.mp4
-  - title: Kezban Tursun
-    src: /videos/Kezban_MD_25.10.21.mp4
-