+
+
+
+
+
+
diff --git a/spa/pinegrow.json b/spa/pinegrow.json
index f3edd4e..c6601d7 100644
--- a/spa/pinegrow.json
+++ b/spa/pinegrow.json
@@ -1 +1 @@
-{"files":{"edit.html":{"frameworks":["spa","pg.insight.events","pg.code-validator","pg.asset.manager","pg.project.items","mat0.97.5","pg.html","pg.components"],"last_page_width":896},"404.html":{"frameworks":["spa","pg.insight.events","pg.code-validator","pg.project.items","pg.asset.manager","mat0.97.5","pg.html","pg.components"],"last_page_width":1024}},"breakpoints":["28.875em","33.875em","35.875em","38.875em","40.125em","46.75em","360px","390px","420px","450px","480px","510px","540px","570px","601px","630px","660px","690px","720px","750px","780px","810px","840px","870px","900px","930px","960px","993px","1200px"],"frameworks":["spa","pg.insight.events","pg.code-validator","pg.asset.manager","pg.project.items","mat0.97.5","pg.html","pg.components"],"template_framework_id":"materialize"}
\ No newline at end of file
+{"files":{"edit.html":{"frameworks":["spa","pg.insight.events","pg.code-validator","pg.asset.manager","pg.project.items","mat0.97.5","pg.html","pg.components"],"last_page_width":896},"404.html":{"frameworks":["spa","pg.insight.events","pg.code-validator","pg.project.items","pg.asset.manager","mat0.97.5","pg.html","pg.components"],"last_page_width":1024},"livecast.html":{"frameworks":["spa","pg.insight.events","pg.code-validator","pg.project.items","pg.asset.manager","mat0.97.5","pg.html","pg.components"],"last_page_width":1024}},"breakpoints":["28.875em","33.875em","35.875em","38.875em","40.125em","46.75em","360px","390px","420px","450px","480px","510px","540px","570px","601px","630px","660px","690px","720px","750px","780px","810px","840px","870px","900px","930px","960px","993px","1200px"],"frameworks":["spa","pg.insight.events","pg.code-validator","pg.project.items","pg.asset.manager","mat0.97.5","pg.html","pg.components"],"template_framework_id":"materialize"}
\ No newline at end of file
diff --git a/spa/starter-template.css b/spa/starter-template.css
index 2e8db1f..1aee99c 100644
--- a/spa/starter-template.css
+++ b/spa/starter-template.css
@@ -1,4 +1,20 @@
+
+
/* Custom Stylesheet */
+
+.videoWrapper {
+ position: relative;
+ padding-bottom: 56.25%; /* 16:9 */
+ padding-top: 25px;
+ height: 0;
+}
+.videoWrapper iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
/**
* Use this file to override Materialize files so you can update
* the core Materialize files in the future
@@ -6,9 +22,13 @@
* Made By MaterializeCSS.com
*/
-.icon-block {
- padding: 0 15px;
+.icon-block
+{
+ padding: 0 15px;
+}
+
+.icon-block .material-icons
+{
+ font-size: inherit;
}
-.icon-block .material-icons {
- font-size: inherit;
-}
\ No newline at end of file
+
diff --git a/spa/starter-template.js b/spa/starter-template.js
index 01938d5..371c75d 100644
--- a/spa/starter-template.js
+++ b/spa/starter-template.js
@@ -4,4 +4,43 @@
$('.button-collapse').sideNav();
}); // end of document ready
-})(jQuery); // end of jQuery name space
\ No newline at end of file
+})(jQuery); // end of jQuery name space
+
+function resizeYoutubeVideo(){
+ // Find all YouTube videos
+ var $allVideos = $("iframe[src^='//www.youtube.com']"),
+
+ // The element that is fluid width
+ $fluidEl = $("#videowraper");
+
+
+ // Figure out and save aspect ratio for each video
+ $allVideos.each(function() {
+
+ $(this)
+ .data('aspectRatio', this.height / this.width)
+
+ // and remove the hard coded width/height
+ .removeAttr('height')
+ .removeAttr('width');
+
+ });
+
+ // When the window is resized
+ $(window).resize(function() {
+
+ var newWidth = $fluidEl.width();
+
+ // Resize all videos according to their own aspect ratio
+ $allVideos.each(function() {
+
+ var $el = $(this);
+ $el
+ .width(newWidth)
+ .height(newWidth * $el.data('aspectRatio'));
+
+ });
+
+ // Kick off one resize to fix all videos on page load
+ }).resize();
+}
\ No newline at end of file