fixed youtube rendering and code on /posts

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 = "<div class=\"wrapper\">\n" +
-                            "\t<div class=\"youtube\" data-embed=\"" +
-                             ytid +
-                            "\" />\n" +
-                            "\t\t<div class=\"play-button\"></div>\n" +
-                            "\t</div>\n" +
-                            "</div>\n";
-
-                        var original = "<youtube src=\"" + ytid + "\" />";
+                        var youtubeHTML = `
+                            <div class="wrapper">
+                                <div class="youtube" data-embed="${ytid}">
+                                    <div class="play-button"></div>
+                                </div>
+                            </div>`;
+
+                        var original = `<youtube src="${ytid}" />`;
 
                         result = result.split(original).join(youtubeHTML);
                     }

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;
+  }

includes/html/footer.html

@@ -60,6 +60,7 @@
 
 <script>
 
+
     function lazyLoad()
     {
 
@@ -82,7 +83,6 @@
                 iframe.setAttribute( "frameborder", "0" );
                 iframe.setAttribute( "allowfullscreen", "" );
                 iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
-
                 this.innerHTML = "";
                 this.appendChild( iframe );
             } );
@@ -90,7 +90,7 @@
     }
 
 
-
+    // waits for the page to render
     ( function() {
 
         lazyLoad();

includes/html/header.html

@@ -9,7 +9,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!--<link rel="stylesheet" href="/includes/css/purge.css" media="screen">-->
+
     <link rel="stylesheet" href="/includes/css/bootstrap.css" media="screen">
+    <link rel="stylesheet" href="/includes/css/youtube.css" media="screen">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" integrity="sha512-m/Sn0Ay9ynzYIZZbbw5Jy2QEJhXXeppOimbFNz+5qj1wUOnrzt9Q2a4fRMFqp8SOFNZ3ZwVf+Zm/ezabpqlXXQ==" crossorigin="anonymous" />
+
 
     <meta name="description" content="Blog of Jeffery Russell, featuring technical guides, and projects.">
 

templates/blog/blogMain.html

@@ -77,11 +77,11 @@
 
                 $("#newPosts").append(content);
                 //lazy loads youtube videos
-                lazyLoad();
+                //lazyLoad();
 
                 //highlights code
                 Prism.highlightAll();
-                
+
                 //renders latex math
                 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
                 resolve();
@@ -106,7 +106,7 @@
                 
             await addPosts(postsToLoad.shift());
         }
-        console.log("Wham");
+        lazyLoad();
     }
 
     $(document).ready(function()

templates/blog/header.html

@@ -14,6 +14,7 @@
 
     <!--<link rel="stylesheet" href="/includes/css/purge.css" media="screen">-->
     <link rel="stylesheet" href="/includes/css/bootstrap.css" media="screen">
+    <link rel="stylesheet" href="/includes/css/youtube.css" media="screen">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" integrity="sha512-m/Sn0Ay9ynzYIZZbbw5Jy2QEJhXXeppOimbFNz+5qj1wUOnrzt9Q2a4fRMFqp8SOFNZ3ZwVf+Zm/ezabpqlXXQ==" crossorigin="anonymous" />