load youtube thumbs in place of actual video and load video on click

layouts/partials/js.html

@@ -12,6 +12,8 @@
 <!-- sizing tools -->
 <script src="/js/fitToParent.js"></script>
 <script src="/js/flowType.js"></script>
+<!-- videos embed -->
+<script src="/js/youtube.js"></script>
 <!-- development tools -->
 <script src="/js/lorem.js"></script>
 {{ if isset .Site.Params "googleAnalytics" }}

layouts/shortcodes/youtube.html

@@ -0,0 +1,4 @@
+<!-- Used for embedding iframes from sites like youtube and google -->
+<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}">
+      <!-- image or iframe injected here -->
+</div>

static/css/page.css

@@ -246,6 +246,7 @@
   opacity: 1;
 }
 
+/*may get rid of thise*/
 .box__embed {
   width: 100%;
   display: flex;
@@ -255,6 +256,28 @@
   align-items: center;
 }
 
+.box--embed {
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.thumb--yt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.thumb--yt:hover {
+  -webkit-filter: brightness(1.2);
+  cursor: pointer;
+}
+
+.thumb--yt > .play-button {
+  font-size: 4em;
+}
+
 .box__caption {
   text-transform: capitalize;
   font-style: italic;

static/js/docready.js

@@ -1,22 +1,21 @@
-(function initialze() {
+function resizeElements() {
   navbarSpacer();
   heroResize();
-  itemResize('iframe');
+  tagResize('iframe');
+  tagResize('.thumb--yt');
   typeResize(); // for section content
+  $('.section__content--modal').perfectScrollbar('update');
+};
+
 hljs.initHighlightingOnLoad();
 $('.section__content--modal').perfectScrollbar();
-})();
 
 // requires jquery
 $(document).ready(function () {
-
+  resizeElements()
 });
 
 // resize elements on change
 $(window).resize(function () {
-  navbarSpacer();
-  heroResize();
-  itemResize('iframe');
-  typeResize();
-  $('.section__content--modal').perfectScrollbar('update');
+  resizeElements()
 });

static/js/fitToParent.js

@@ -10,8 +10,8 @@ jQuery.fn.fitToParent = function (options) {
     var $box;
 
     // Get size parent (box to fit element in)
-    if ($el.closest('.size-parent').length) {
-      $box = $el.closest('.size-parent');
+    if ($el.closest('.box--embed').length) {
+      $box = $el.closest('.box--embed');
     } else {
       $box = $el.parent();
     }
@@ -63,7 +63,8 @@ jQuery.fn.fitToParent = function (options) {
     newWidth = parentWidth;
     newHeight = (newWidth / aspect);
 
-    // console.log(`width before setting ${newWidth}`)
+    // console.log(`$parent,$element ${$box[0].classList} ${$el[0].tagName}`)
+    // console.log(`width and height before setting ${newWidth} ${newHeight}`)
 
     // Set new size of element
     $el.width(newWidth);

static/js/page.js

@@ -63,11 +63,12 @@ function heroResize(bfr = 30) {
 
 // child item resize based on parent container (i.e. flexbox)
 // Especially good for iframes
-function itemResize(item, maxWidth = 450, widthPadding = 30) {
+function tagResize(tag, maxWidth = 450, widthPadding = 30) {
   let windowWidth = $(window).width()
   let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
     // console.log(`passed width ${width}`)
-  jQuery(item).fitToParent({
+  console.log(`tag ${tag}`)
+  jQuery(tag).fitToParent({
     heightOffset: 0, // (int) Put some space around the element
     // widthOffset: 5, // (int) Put some space around the element
     // boxHeight: , // (int) Will look for .size-parent, or fallback to parent size
@@ -174,6 +175,3 @@ function lightgallery(id) {
 }(jQuery));
 
 // end modal
-l
-l
-l

static/js/youtube.js

@@ -0,0 +1,33 @@
+/* Light YouTube Embeds by @labnol */
+/* Web: http://labnol.org/?p=27941 */
+
+(function ($) {
+
+  $.fn.tagResize = function (el) {
+    tagResize(el);
+  }
+
+  $(document).bind("DOMContentLoaded",
+    function () {
+      var attr = 'youtube_id';
+      var $box = $('div[' + attr + ']');
+      var vid = $box.attr(attr);
+      var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
+      var thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
+      var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
+      $box.append(thumb).children().append(playBtn).click(insertIframe)
+        //.resize(sel + ' > img')
+    });
+
+  function insertIframe() {
+    var $box = $(this).parent()
+    id = $box.attr('youtube_id')
+    var vIframe = `<iframe width = "560" height = "315" src = "https://www.youtube.com/embed/${id}?autoplay=1" frameborder = "0" allowfullscreen></iframe>`
+    console.log(vIframe)
+    $box.html(vIframe)
+  }
+
+  // .resize(sel + ' > iframe')
+  // }
+
+}(jQuery));