styling for thumbnails in dashboard

public/css/dashboard.css

@@ -8,6 +8,7 @@
 }
 
 .video-tile {
+    position: relative;
     padding: 3%;
 }
 
@@ -18,6 +19,35 @@
 }
 
 .tile-content {
+    position: absolute;
     width: 100%;
     height: 100%;
+}
+
+.thumbnail {
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+}
+
+.thumbnail img {
+    width: 100%;
+}
+
+.play-button {
+    position: absolute;
+    left: calc(50% - 1.5vw);
+    top: calc(50% - 1.5vw);
+    font-size: 3vw;
+    /*color: var(--vjs-theme-fantasy--primary); */
+    color: #9f44b4;
+    transition: color 0.3s;
+}
+
+.thumbnail:hover .play-button {
+    color: white;
+}
+
+.info {
+    padding: 1vw;
 }

templates/home/dashboard.html.twig

@@ -11,8 +11,24 @@
             {% for video in videos %}
                 <div class="video-tile col-md-4">
                     <div class="tile-content bg-light shadow-5-strong">
-                        {{ video.name }}
-                        (<a href="{{ path("app_watch_page", {linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"), videoId: video.customId}) }}">Link</a>)
+                        <div class="thumbnail" onclick="location.href = '{{ path("app_watch_page", {
+                            linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
+                            videoId: video.customId
+                        }) }}'">
+                            <img alt="Thumbnail" src="{{ path("app_watch_thumbnail", {
+                                linkId: constant("App\\Controller\\WatchController::OWNER_LINK_ID"),
+                                videoId: video.customId
+                            }) }}"/>
+                            <div class="play-button">
+                                <i class="fas fa-play"></i>
+                            </div>
+                        </div>
+                        <div class="info">
+                            <h5>{{ video.name }}</h5>
+                            <p>
+                                {{ video.description }}
+                            </p>
+                        </div>
                     </div>
                 </div>
             {% endfor %}

templates/watch/watch.html.twig

@@ -4,7 +4,6 @@
 
 {% block stylesheets %}
     <link rel="stylesheet" href="{{ asset("css/video-js.css") }}">
-
     <link href="{{ asset("css/video-js-fantasy.css") }}" rel="stylesheet">
 
     <link rel="stylesheet" href="{{ asset("css/watch.css") }}"