diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
new file mode 100644
index 00000000..f30c3056
--- /dev/null
+++ b/layouts/shortcodes/youtube.html
@@ -0,0 +1,3 @@
+<div class="embed video-player">
+  <iframe class="youtube-player" src="https://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen></iframe>
+</div>
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index af580fb4..e7cd1d91 100644
--- a/static/style.css
+++ b/static/style.css
@@ -723,6 +723,22 @@ body#notes div#content hr {
   border: 1px solid #ccc;
 }
 
+body#notes div#content div.embed.video-player {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+}
+
+body#notes div#content div.embed.video-player iframe.youtube-player {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
 
 /* Archive List */