diff --git a/web/_data/screenshots.json b/web/_data/screenshots.json
index 915dcbe..d3246ad 100644
--- a/web/_data/screenshots.json
+++ b/web/_data/screenshots.json
@@ -1,19 +1,19 @@
 [{
-    "value": "CharacterCreator",
+    "value": "CharacterCreator.jpg",
     "text": "Create your own characters with unique personalities and skills and dress them however you like"
 }, {
-    "value": "Map",
+    "value": "BuildMode.jpg",
     "text": "Build houses and community spaces like parks and cafés and watch households inhabit them"
 }, {
-    "value": "Gameplay",
+    "value": "Gameplay.jpg",
     "text": "Control your household and tell your characters what to do, from cooking food to learning complex skills like programming and painting"
 }, {
-    "value": "Relationships",
+    "value": "Relationships.jpg",
     "text": "Have your characters interact, build relationships, grow families and live unique lives"
 }, {
-    "value": "Lighting",
+    "value": "Travel.jpg",
     "text": "Share your creations with the community by exporting lots and households from your game"
 }, {
-    "value": "Modding",
+    "value": "Modding.png",
     "text": "Create additional content through the game's built-in C# modding API, like <a href=\"https://github.com/ssblur/IttyMod\">Itty</a> by ssblur"
 }]
\ No newline at end of file
diff --git a/web/_includes/about.html b/web/_includes/about.html
index e0fc4d5..103342e 100644
--- a/web/_includes/about.html
+++ b/web/_includes/about.html
@@ -6,10 +6,14 @@
 
     {% for item in site.data.screenshots %}
     <div class="screenshot">
-        <img src="media/screenshots/{{ item.value }}.png" width="100%" class="screen">
+        <img src="media/screenshots/{{ item.value }}" width="100%" class="screen">
         <div class="feature feature-{{ forloop.index0 | modulo: 2 }}">
             <p>{{ item.text }}</p>
         </div>
     </div>
     {% endfor %}
+
+    <div class="trailer">
+        <iframe src="https://www.youtube.com/embed/iw-D7queVUI" title="Tiny Life Trailer" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
 </div>
\ No newline at end of file
diff --git a/web/media/screenshots/BuildMode.jpg b/web/media/screenshots/BuildMode.jpg
new file mode 100644
index 0000000..81ea1bc
Binary files /dev/null and b/web/media/screenshots/BuildMode.jpg differ
diff --git a/web/media/screenshots/CharacterCreator.jpg b/web/media/screenshots/CharacterCreator.jpg
new file mode 100644
index 0000000..31bb59a
Binary files /dev/null and b/web/media/screenshots/CharacterCreator.jpg differ
diff --git a/web/media/screenshots/CharacterCreator.png b/web/media/screenshots/CharacterCreator.png
deleted file mode 100644
index 6d66d46..0000000
Binary files a/web/media/screenshots/CharacterCreator.png and /dev/null differ
diff --git a/web/media/screenshots/Gameplay.jpg b/web/media/screenshots/Gameplay.jpg
new file mode 100644
index 0000000..a13a91d
Binary files /dev/null and b/web/media/screenshots/Gameplay.jpg differ
diff --git a/web/media/screenshots/Gameplay.png b/web/media/screenshots/Gameplay.png
deleted file mode 100644
index e373e9b..0000000
Binary files a/web/media/screenshots/Gameplay.png and /dev/null differ
diff --git a/web/media/screenshots/Lighting.png b/web/media/screenshots/Lighting.png
deleted file mode 100644
index 29725ad..0000000
Binary files a/web/media/screenshots/Lighting.png and /dev/null differ
diff --git a/web/media/screenshots/Map.png b/web/media/screenshots/Map.png
deleted file mode 100644
index 73a12f6..0000000
Binary files a/web/media/screenshots/Map.png and /dev/null differ
diff --git a/web/media/screenshots/Relationships.jpg b/web/media/screenshots/Relationships.jpg
new file mode 100644
index 0000000..91cb805
Binary files /dev/null and b/web/media/screenshots/Relationships.jpg differ
diff --git a/web/media/screenshots/Relationships.png b/web/media/screenshots/Relationships.png
deleted file mode 100644
index 85e8227..0000000
Binary files a/web/media/screenshots/Relationships.png and /dev/null differ
diff --git a/web/media/screenshots/Travel.jpg b/web/media/screenshots/Travel.jpg
new file mode 100644
index 0000000..96a1a0e
Binary files /dev/null and b/web/media/screenshots/Travel.jpg differ
diff --git a/web/style.css b/web/style.css
index 60207f1..6360ec3 100644
--- a/web/style.css
+++ b/web/style.css
@@ -86,13 +86,19 @@
     display: inline-block;
 }
 
-.changelog img {
+.trailer {
+    margin-top: 60px;
+    margin-bottom: 40px;
+    position: relative;
     width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
 }
 
-.changelog blockquote {
-    margin-left: 2em;
-    margin-right: 2em;
-    font-style: italic;
-    font-size: 18px;
+.trailer iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file