diff --git a/blog/renderBlogPost.js b/blog/renderBlogPost.js
index 191fafe..552e487 100644
--- a/blog/renderBlogPost.js
+++ b/blog/renderBlogPost.js
@@ -126,15 +126,14 @@ module.exports=
while (result.search(re) != -1)
{
var ytid = result.substring(result.search(re) + 14, result.search(re)+ 11 + 14);
- var youtubeHTML = "
\n" +
- "\t
\n" +
- "\t\t
\n" +
- "\t
\n" +
- "\n";
-
- var original = "";
+ var youtubeHTML = `
+ `;
+
+ var original = ``;
result = result.split(original).join(youtubeHTML);
}
diff --git a/includes/css/youtube.css b/includes/css/youtube.css
new file mode 100644
index 0000000..0d673c4
--- /dev/null
+++ b/includes/css/youtube.css
@@ -0,0 +1,57 @@
+.wrapper {
+ max-width: 680px;
+ margin: 60px auto;
+ padding: 0 20px;
+ }
+
+ .youtube {
+ background-color: #000;
+ margin-bottom: 30px;
+ position: relative;
+ padding-top: 56.25%;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ .youtube img {
+ width: 100%;
+ top: -16.82%;
+ left: 0;
+ opacity: 0.7;
+ }
+ .play-button {
+ width: 90px;
+ height: 60px;
+ background-color: #333;
+ box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
+ z-index: 1;
+ opacity: 0.8;
+ border-radius: 6px;
+ }
+ .play-button:before {
+ content: "";
+ border-style: solid;
+ border-width: 15px 0 15px 26.0px;
+ border-color: transparent transparent transparent #fff;
+ }
+ .youtube img,
+ .play-button {
+ cursor: pointer;
+ }
+ .youtube img,
+ .youtube iframe,
+ .play-button,
+ .play-button:before {
+ position: absolute;
+ }
+ .play-button,
+ .play-button:before {
+ top: 50%;
+ left: 50%;
+ transform: translate3d( -50%, -50%, 0 );
+ }
+ .youtube iframe {
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ }
\ No newline at end of file
diff --git a/includes/html/footer.html b/includes/html/footer.html
index b6989cc..baa104c 100644
--- a/includes/html/footer.html
+++ b/includes/html/footer.html
@@ -60,6 +60,7 @@