From b3d6845e6bacaf30963aa7176ef9970ca50b8c58 Mon Sep 17 00:00:00 2001 From: David Kebler Date: Mon, 10 Apr 2017 15:15:14 -0700 Subject: [PATCH] load youtube thumbs in place of actual video and load video on click --- layouts/partials/js.html | 2 ++ layouts/shortcodes/youtube.html | 4 ++++ static/css/page.css | 25 ++++++++++++++++++++++++- static/js/docready.js | 21 ++++++++++----------- static/js/fitToParent.js | 7 ++++--- static/js/page.js | 10 ++++------ static/js/youtube.js | 33 +++++++++++++++++++++++++++++++++ 7 files changed, 81 insertions(+), 21 deletions(-) create mode 100644 layouts/shortcodes/youtube.html create mode 100644 static/js/youtube.js diff --git a/layouts/partials/js.html b/layouts/partials/js.html index 5dca0bc..0ce6d46 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -12,6 +12,8 @@ + + {{ if isset .Site.Params "googleAnalytics" }} diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html new file mode 100644 index 0000000..3b0762f --- /dev/null +++ b/layouts/shortcodes/youtube.html @@ -0,0 +1,4 @@ + +
+ +
diff --git a/static/css/page.css b/static/css/page.css index 9eb6b5f..b8ce276 100644 --- a/static/css/page.css +++ b/static/css/page.css @@ -135,7 +135,7 @@ padding: 1em; } - /*fix for fucking google chrome pushing up overflow content */ +/*fix for fucking google chrome pushing up overflow content */ .section__content--modal * { flex-shrink: 0; } @@ -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; diff --git a/static/js/docready.js b/static/js/docready.js index ccbe50e..7c73440 100644 --- a/static/js/docready.js +++ b/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 - hljs.initHighlightingOnLoad(); - $('.section__content--modal').perfectScrollbar(); -})(); + $('.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() }); diff --git a/static/js/fitToParent.js b/static/js/fitToParent.js index ce4d634..f6573ab 100644 --- a/static/js/fitToParent.js +++ b/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); diff --git a/static/js/page.js b/static/js/page.js index f506772..fbe000b 100644 --- a/static/js/page.js +++ b/static/js/page.js @@ -48,7 +48,7 @@ function heroResize(bfr = 30) { //console.log('fr after', fr) $('#hero').css({ - width: w+15, + width: w + 15, height: h / w > 1.5 ? w * 1.5 : h, }); @@ -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 diff --git a/static/js/youtube.js b/static/js/youtube.js new file mode 100644 index 0000000..15792f6 --- /dev/null +++ b/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 = `
` + var playBtn = '' + $box.append(thumb).children().append(playBtn).click(insertIframe) + //.resize(sel + ' > img') + }); + + function insertIframe() { + var $box = $(this).parent() + id = $box.attr('youtube_id') + var vIframe = `` + console.log(vIframe) + $box.html(vIframe) + } + + // .resize(sel + ' > iframe') + // } + +}(jQuery));