| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" /> | |||||
| <title>{{.Title}}</title> | |||||
| <!-- CSS --> | |||||
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |||||
| <link href="materialize/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" /> | |||||
| <link href="starter-template.css" type="text/css" rel="stylesheet" media="screen,projection" /> | |||||
| </head> | |||||
| <body> | |||||
| <div class="section no-pad-bot" id="index-banner"> | |||||
| <div class="container"> | |||||
| <br> | |||||
| <br> | |||||
| <h5 class="header center orange-text">{{.Title}}</h5> | |||||
| <div id="videowraper" class="row center videoWrapper"> | |||||
| <iframe width="560" height="315" src="{{.Youtube}}" frameborder="0" allowfullscreen></iframe> | |||||
| </div> | |||||
| <div class="row left"> | |||||
| <div class="col s12"> | |||||
| <p>{{.Description}}</p> | |||||
| </div> | |||||
| </div> | |||||
| <br> | |||||
| </div> | |||||
| </div> | |||||
| <!-- Scripts--> | |||||
| <script src="assets/js/jquery.min.js"></script> | |||||
| <script src="materialize/js/materialize.js"></script> | |||||
| <script src="starter-template.js"></script> | |||||
| </body> | |||||
| </html> |
| {"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"} | |||||
| {"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"} |
| /* Custom Stylesheet */ | /* 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 | * Use this file to override Materialize files so you can update | ||||
| * the core Materialize files in the future | * the core Materialize files in the future | ||||
| * Made By MaterializeCSS.com | * 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; | |||||
| } | |||||
| $('.button-collapse').sideNav(); | $('.button-collapse').sideNav(); | ||||
| }); // end of document ready | }); // end of document ready | ||||
| })(jQuery); // end of jQuery name space | |||||
| })(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(); | |||||
| } |