diff --git a/_includes/head.html b/_includes/head.html
index e856817..2a2ed61 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -10,6 +10,10 @@
   <!-- scripts -->
   <script src="{{ "/assets/js/jquery.min.js" | relative_url }}"></script>
   <script src="{{ "/assets/js/sidenotes.js" | relative_url }}"></script>
+{% if page.include_stl_viewer_js -%}
+  <script src="{{ "/assets/js/stlv/stl_viewer.min.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/stlviewer-datatag.js" | relative_url }}"></script>
+{% endif -%}
 
   <!-- Favicon -->
 {% for file in site.static_files -%}
diff --git a/_sass/tale.scss b/_sass/tale.scss
index f326d17..13df700 100644
--- a/_sass/tale.scss
+++ b/_sass/tale.scss
@@ -12,3 +12,24 @@
 @import 'tale/sidenote';
 @import 'tale/footnotes';
 @import 'tale/navigation';
+
+.stl-viewer {
+  width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.svs-custom { padding-top: 0% !important; margin: 0 auto; }
+.svs-4-3 { padding-top: 75% !important; }
+.svs-16-9 { padding-top: 56.25% !important; }
+