Patrick Peng Sun
il y a 8 ans
4 fichiers modifiés avec 100 ajouts et 7 suppressions
+ 34
- 0
spa/livecast.html
Voir le fichier
| @@ -0,0 +1,34 @@ | |||
| <!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> | |||
+ 1
- 1
spa/pinegrow.json
Voir le fichier
| @@ -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"} | |||
| {"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"} | |||
+ 25
- 5
spa/starter-template.css
Voir le fichier
| @@ -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; | |||
| } | |||
+ 40
- 1
spa/starter-template.js
Voir le fichier
| @@ -4,4 +4,43 @@ | |||
| $('.button-collapse').sideNav(); | |||
| }); // 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(); | |||
| } | |||
Chargement…