diff --git a/front/components/movieCard/full.vue b/front/components/movieCard/full.vue
index e7f75ba..e214b2a 100644
--- a/front/components/movieCard/full.vue
+++ b/front/components/movieCard/full.vue
@@ -1,73 +1,87 @@
 <template>
-  <div class="card">
-    <header class="card-content is-flex">
-      <div>
-        <h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
-        <div class="subtitle is-5 is-inline">{{ film.director }}</div>
-        <div class="field is-grouped is-grouped-multiline mt-4">
-          <div v-for="(tag, index) of headerTags" :key="index" class="control">
-            <div class="tags has-addons">
-              <span v-if="tag.label" class="tag">{{ tag.label }}</span>
-              <span class="tag is-primary">{{ tag.value }}</span>
+  <div v-if="film">
+    <div class="card">
+      <header class="card-content is-flex">
+        <div>
+          <h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
+          <div class="subtitle is-5 is-inline">{{ film.director }}</div>
+          <div class="field is-grouped is-grouped-multiline mt-4">
+            <div
+              v-for="(tag, index) of headerTags"
+              :key="index"
+              class="control"
+            >
+              <div class="tags has-addons">
+                <span v-if="tag.label" class="tag">{{ tag.label }}</span>
+                <span class="tag is-primary">{{ tag.value }}</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <ButtonIcon
-        label="Bande-annonce"
-        icon="ri-play-circle-fill"
-        class="is-primary is-outlined ml-auto"
-      />
-    </header>
-    <div class="is-flex">
-      <div
-        class="poster-container"
-        :style="{ '--poster-url': `url(${film.posterLink})` }"
-      >
-        <figure class="image my-auto">
-          <img :src="film.posterLink" alt="Affiche du film" />
-        </figure>
-      </div>
-      <div class="card-content">
-        <div class="content">
-          <p class="block">
-            <span class="has-text-weight-bold">Acteurs :</span>
-            {{ film.actors.join(", ") }}
-          </p>
-          <p class="block">
-            <span class="has-text-weight-bold">Synopsis :</span>
-            {{ film.synopsis }}
-          </p>
-          <!-- TODO additional info about partnership etc -->
+        <ButtonIcon
+          v-if="film.trailerLink"
+          label="Bande-annonce"
+          icon="ri-play-circle-fill"
+          class="is-primary is-outlined ml-auto"
+          @click="showTrailerModal = true"
+        />
+      </header>
+      <div class="is-flex">
+        <div
+          class="poster-container"
+          :style="{ '--poster-url': `url(${film.posterLink})` }"
+        >
+          <figure class="image my-auto">
+            <img :src="film.posterLink" alt="Affiche du film" />
+          </figure>
+        </div>
+        <div class="card-content">
+          <div class="content">
+            <p class="block">
+              <span class="has-text-weight-bold">Acteurs :</span>
+              {{ film.actors.join(", ") }}
+            </p>
+            <p class="block">
+              <span class="has-text-weight-bold">Synopsis :</span>
+              {{ film.synopsis }}
+            </p>
+            <!-- TODO additional info about partnership etc -->
+          </div>
         </div>
       </div>
+      <footer class="card-content is-flex">
+        <div class="buttons">
+          <template v-if="isPast">
+            <ButtonIcon
+              label="Lire notre analyse"
+              icon="ri-double-quotes-l"
+              class="is-outlined is-primary"
+            />
+          </template>
+          <template v-else>
+            <ButtonIcon
+              label="Événement Facebook"
+              icon="ri-facebook-box-fill"
+              class="is-outlined is-primary"
+            />
+            <ButtonIcon
+              label="Ajouter au calendrier"
+              icon="ri-calendar-event-fill"
+              class="is-outlined is-primary"
+            />
+          </template>
+        </div>
+        <div class="ml-auto title is-4">
+          {{ film.projectionDate }}
+        </div>
+      </footer>
     </div>
-    <footer class="card-content is-flex">
-      <div class="buttons">
-        <template v-if="isPast">
-          <ButtonIcon
-            label="Lire notre analyse"
-            icon="ri-double-quotes-l"
-            class="is-outlined is-primary"
-          />
-        </template>
-        <template v-else>
-          <ButtonIcon
-            label="Événement Facebook"
-            icon="ri-facebook-box-fill"
-            class="is-outlined is-primary"
-          />
-          <ButtonIcon
-            label="Ajouter au calendrier"
-            icon="ri-calendar-event-fill"
-            class="is-outlined is-primary"
-          />
-        </template>
-      </div>
-      <div class="ml-auto title is-4">
-        {{ film.projectionDate }}
-      </div>
-    </footer>
+    <MovieCardTrailerModal
+      v-if="showTrailerModal"
+      :url="film.trailerLink"
+      :iframe-id="`film-card-${film.id}`"
+      @close="showTrailerModal = false"
+    />
   </div>
 </template>
 
diff --git a/front/components/movieCard/trailerModal.vue b/front/components/movieCard/trailerModal.vue
new file mode 100644
index 0000000..4f3cdc3
--- /dev/null
+++ b/front/components/movieCard/trailerModal.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="modal is-active">
+    <div class="modal-background" @click="$emit('close')" />
+    <div class="modal-card">
+      <section class="modal-card-body">
+        <iframe
+          v-if="url"
+          :id="`ytplayer-${iframeId}`"
+          type="text/html"
+          width="640"
+          height="360"
+          :src="url"
+          frameborder="0"
+        />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  iframeId: {
+    type: String,
+    default: () => (Math.random() + 1).toString(36).substring(7),
+  },
+  url: { type: String, default: "" },
+})
+defineEmits(["close"])
+</script>
+
+<style scoped lang="sass">
+.modal-card
+  width: fit-content
+</style>
diff --git a/front/css/app.sass b/front/css/app.sass
index 210f09c..7949ce1 100644
--- a/front/css/app.sass
+++ b/front/css/app.sass
@@ -6,6 +6,7 @@
 @import "bulma-list/sass/bulma-list"
 @import "bulma/sass/base/_all"
 @import "bulma/sass/components/card"
+@import "bulma/sass/components/modal"
 @import "bulma/sass/components/navbar"
 @import "bulma/sass/elements/button"
 @import "bulma/sass/elements/container"