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

master
David Kebler 2017-04-10 15:15:14 -07:00
parent e99df78be1
commit b3d6845e6b
7 changed files with 81 additions and 21 deletions

View File

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

View File

@ -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>

View File

@ -135,7 +135,7 @@
padding: 1em; padding: 1em;
} }
/*fix for fucking google chrome pushing up overflow content */ /*fix for fucking google chrome pushing up overflow content */
.section__content--modal * { .section__content--modal * {
flex-shrink: 0; flex-shrink: 0;
} }
@ -246,6 +246,7 @@
opacity: 1; opacity: 1;
} }
/*may get rid of thise*/
.box__embed { .box__embed {
width: 100%; width: 100%;
display: flex; display: flex;
@ -255,6 +256,28 @@
align-items: center; 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 { .box__caption {
text-transform: capitalize; text-transform: capitalize;
font-style: italic; font-style: italic;

View File

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

View File

@ -10,8 +10,8 @@ jQuery.fn.fitToParent = function (options) {
var $box; var $box;
// Get size parent (box to fit element in) // Get size parent (box to fit element in)
if ($el.closest('.size-parent').length) { if ($el.closest('.box--embed').length) {
$box = $el.closest('.size-parent'); $box = $el.closest('.box--embed');
} else { } else {
$box = $el.parent(); $box = $el.parent();
} }
@ -63,7 +63,8 @@ jQuery.fn.fitToParent = function (options) {
newWidth = parentWidth; newWidth = parentWidth;
newHeight = (newWidth / aspect); 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 // Set new size of element
$el.width(newWidth); $el.width(newWidth);

View File

@ -48,7 +48,7 @@ function heroResize(bfr = 30) {
//console.log('fr after', fr) //console.log('fr after', fr)
$('#hero').css({ $('#hero').css({
width: w+15, width: w + 15,
height: h / w > 1.5 ? w * 1.5 : h, 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) // child item resize based on parent container (i.e. flexbox)
// Especially good for iframes // Especially good for iframes
function itemResize(item, maxWidth = 450, widthPadding = 30) { function tagResize(tag, maxWidth = 450, widthPadding = 30) {
let windowWidth = $(window).width() let windowWidth = $(window).width()
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
// console.log(`passed width ${width}`) // console.log(`passed width ${width}`)
jQuery(item).fitToParent({ console.log(`tag ${tag}`)
jQuery(tag).fitToParent({
heightOffset: 0, // (int) Put some space around the element heightOffset: 0, // (int) Put some space around the element
// widthOffset: 5, // (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 // boxHeight: , // (int) Will look for .size-parent, or fallback to parent size
@ -174,6 +175,3 @@ function lightgallery(id) {
}(jQuery)); }(jQuery));
// end modal // end modal
l
l
l

33
static/js/youtube.js Normal file
View File

@ -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));