youtube shortcode embeding with fit to window working!
David Kebler
parent
b3d6845e6b
commit
6902898adc
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<!-- LOCAL -->
|
||||
<!-- sizing tools -->
|
||||
<script src="/js/fitToParent.js"></script>
|
||||
<script src="/js/fitToWindow.js"></script>
|
||||
<script src="/js/flowType.js"></script>
|
||||
<!-- videos embed -->
|
||||
<script src="/js/youtube.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,29 @@
|
|||
<!-- Used for embedding iframes from sites like youtube and google -->
|
||||
<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}">
|
||||
<!-- TODO add in defaul maxwidth and wpad here with site parameters and scratch -->
|
||||
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "maxwidth" .maxwidth }}{{ end }}
|
||||
{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }}
|
||||
{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "wpad" .wpad }}{{ end }}
|
||||
{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }}
|
||||
{{ if .IsNamedParams }}
|
||||
<div class="box box--column">
|
||||
{{ with .Get "title" }}
|
||||
<div class="box__title">{{ . }}</div>
|
||||
{{ end }}
|
||||
<div class="box box--embed box--youtube"
|
||||
youtube_id="{{ .Get "id" }}"
|
||||
{{ with .Get "start"}} start="{{ . }}"{{ end }}
|
||||
{{ with .Get "plist"}} list="{{ . }}"{{ end }}
|
||||
{{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
|
||||
{{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
|
||||
>
|
||||
<!-- thumb and video get put here -->
|
||||
</div>
|
||||
{{ with .Get "caption"}}
|
||||
<div class="box__caption">{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ $numOfParams := ( len .Params ) }}
|
||||
<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}" {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}>
|
||||
<!-- image or iframe injected here -->
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,26 @@
|
|||
function resizeElements() {
|
||||
navbarSpacer();
|
||||
heroResize();
|
||||
tagResize('iframe');
|
||||
tagResize('.thumb--yt');
|
||||
// tagResize('iframe');
|
||||
// tagResize('.thumb--yt');
|
||||
typeResize(); // for section content
|
||||
$('.section__content--modal').perfectScrollbar('update');
|
||||
};
|
||||
|
||||
hljs.initHighlightingOnLoad();
|
||||
$('.section__content--modal').perfectScrollbar();
|
||||
function initialize() {
|
||||
hljs.initHighlightingOnLoad();
|
||||
$('.section__content--modal').perfectScrollbar();
|
||||
resizeElements()
|
||||
};
|
||||
|
||||
initialize();
|
||||
|
||||
// requires jquery
|
||||
$(document).ready(function () {
|
||||
resizeElements()
|
||||
});
|
||||
|
||||
// resize elements on change
|
||||
$(window).resize(function () {
|
||||
resizeElements()
|
||||
// bind resize events
|
||||
$(window).resize(function () {
|
||||
resizeElements()
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
/*!
|
||||
* jQuery fitToParent; version: 1.2.1
|
||||
* https://github.com/drewbaker/fitToParent
|
||||
*/
|
||||
jQuery.fn.fitToParent = function (options) {
|
||||
|
||||
this.each(function () {
|
||||
// Vars
|
||||
var $el = jQuery(this);
|
||||
var $box;
|
||||
|
||||
// Get size parent (box to fit element in)
|
||||
if ($el.closest('.box--embed').length) {
|
||||
$box = $el.closest('.box--embed');
|
||||
} else {
|
||||
$box = $el.parent();
|
||||
}
|
||||
|
||||
// These are the defaults.
|
||||
var settings = jQuery.extend({
|
||||
heightOffset: 0,
|
||||
widthOffset: 0,
|
||||
boxHeight: $box.height(),
|
||||
boxWidth: $box.width(),
|
||||
callback: null
|
||||
}, options);
|
||||
|
||||
// Setup box and element widths
|
||||
var width = $el.attr('width');
|
||||
var height = $el.attr('height');
|
||||
|
||||
if (!width || !height) {
|
||||
var width = $el.width();
|
||||
var height = $el.height();
|
||||
}
|
||||
|
||||
var parentWidth = settings.boxWidth - settings.widthOffset;
|
||||
var parentHeight = settings.boxHeight - settings.heightOffset;
|
||||
|
||||
// console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`);
|
||||
|
||||
// Maintain aspect ratio
|
||||
var aspect = $el.data('aspect');
|
||||
if (!aspect) {
|
||||
aspect = width / height;
|
||||
$el.data('aspect', aspect);
|
||||
}
|
||||
|
||||
// removed for flexbox parent with dynamic height
|
||||
// var parentAspect = parentWidth / parentHeight;
|
||||
// // Resize to fit box
|
||||
// if (aspect > parentAspect) {
|
||||
// newWidth = parentWidth;
|
||||
// console.log(`aspect > width ${newWidth}`)
|
||||
// newHeight = (newWidth / aspect);
|
||||
//
|
||||
// } else {
|
||||
// newHeight = parentHeight;
|
||||
// newWidth = newHeight * aspect;
|
||||
// console.log(`aspect < width ${newWidth}`)
|
||||
// }
|
||||
|
||||
newWidth = parentWidth;
|
||||
newHeight = (newWidth / aspect);
|
||||
|
||||
// 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);
|
||||
$el.height(newHeight);
|
||||
|
||||
// Fire callback
|
||||
if (typeof (settings.callback) == "function") {
|
||||
settings.callback(newWidth, newHeight);
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/*!
|
||||
* adapted from
|
||||
* https://github.com/drewbaker/fitToParent
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
|
||||
$.fn.fitToWindow = function (maxWidth, wPad) {
|
||||
|
||||
console.log("in fit to Window")
|
||||
|
||||
// if more than one element
|
||||
this.each(function () {
|
||||
let $el = $(this);
|
||||
|
||||
console.log(`${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
|
||||
|
||||
maxWidth = (maxWidth || $el.data('maxWidth')) || 450
|
||||
wPad = (wPad || $el.data('wPad')) || 5
|
||||
|
||||
let windowWidth = $(window).width()
|
||||
let newWidth = (windowWidth > maxWidth) ? maxWidth : windowWidth - 2 * wPad
|
||||
|
||||
console.log(`${maxWidth} ${wPad} ${newWidth} ${$el.parent().attr('youtube_id')}`)
|
||||
|
||||
// Initial Aspect given in attributes by element itself
|
||||
let setWidth = $el.attr('width');
|
||||
let setHeight = $el.attr('height');
|
||||
|
||||
if (!setWidth || !setHeight) {
|
||||
setWidth = $el.width();
|
||||
setHeight = $el.height();
|
||||
}
|
||||
|
||||
// retrieve aspect ratio for element if none then set (first time)
|
||||
var aspect = $el.data('aspect');
|
||||
if (!aspect) {
|
||||
aspect = setWidth / setHeight;
|
||||
$el.data('aspect', aspect);
|
||||
console.log(`aspect set ${aspect} = ${$el.data('aspect')}`)
|
||||
$el.data('maxWidth', maxWidth)
|
||||
$el.data('wPad', wPad)
|
||||
console.log(`values set ${maxWidth} = ${$el.data('maxWidth')} ${wPad} = ${$el.data('wPad')}`)
|
||||
console.log("REGISTERING RESIZE")
|
||||
$(window).resize({ el: $el }, function (event) {
|
||||
event.data.el.fitToWindow()
|
||||
})
|
||||
}
|
||||
|
||||
newHeight = (newWidth / aspect);
|
||||
|
||||
console.log(`new width and height before setting ${newWidth} ${newHeight}`)
|
||||
|
||||
// Set new size of element
|
||||
$el.width(newWidth);
|
||||
$el.height(newHeight);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
|
||||
// one time fit a element based on selector to the window
|
||||
let fitToWindow = function (sel) {
|
||||
if (sel) {
|
||||
$(sel).fitToWindow()
|
||||
} else { Alert("no selector provided for resize event to call fitToWindow") }
|
||||
}
|
||||
|
||||
// register a selector to be fitted to window on window resize
|
||||
let onResizeFitToWindow = function (sel) {
|
||||
if (sel) {
|
||||
$(window).resize(function () {
|
||||
$(sel).fitToWindow()
|
||||
})
|
||||
} else { Alert("no selector provided for resize event to call fitToWindow") }
|
||||
}
|
||||
|
|
@ -61,22 +61,6 @@ function heroResize(bfr = 30) {
|
|||
});
|
||||
}
|
||||
|
||||
// child item resize based on parent container (i.e. flexbox)
|
||||
// Especially good for iframes
|
||||
function tagResize(tag, maxWidth = 450, widthPadding = 30) {
|
||||
let windowWidth = $(window).width()
|
||||
let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
|
||||
// console.log(`passed width ${width}`)
|
||||
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
|
||||
boxWidth: width // (int) Will look for .size-parent, or fallback to parent size
|
||||
// callback: function (newWidth, newHeight) {}
|
||||
})
|
||||
}
|
||||
|
||||
function typeResize(fr = 20) {
|
||||
$('main:not(#hero)').flowtype({
|
||||
// maximum: 1000,
|
||||
|
|
|
|||
|
|
@ -1,33 +1,28 @@
|
|||
/* 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">`
|
||||
// TODO also grad maxwith and window padding data
|
||||
var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
|
||||
$box.append(thumb).children().append(playBtn).click(insertIframe)
|
||||
//.resize(sel + ' > img')
|
||||
$('div[youtube_id]').each(function () {
|
||||
var vid = $(this).attr('youtube_id');
|
||||
var mw = $(this).attr('maxWidth');
|
||||
var wp = $(this).attr('wPad');
|
||||
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">`
|
||||
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp)
|
||||
})
|
||||
});
|
||||
|
||||
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)
|
||||
var id = $box.attr('youtube_id')
|
||||
var start = $box.attr("start") || 1
|
||||
var list = ""
|
||||
if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
|
||||
var url = `https://www.youtube.com/embed/${id}?autoplay=1&start=${start}`
|
||||
var vIframe = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
|
||||
$box.html(vIframe).children().fitToWindow($box.data("maxWidth"), $box.data("wPad"))
|
||||
}
|
||||
|
||||
// .resize(sel + ' > iframe')
|
||||
// }
|
||||
|
||||
}(jQuery));
|
||||
|
|
|
|||
Loading…
Reference in New Issue