Add:
static/(sass/about.sass, js/about.js)
-Convert `adjustVimeoDimensions()`, which created the
fluid-dimensioned Vimeo video, to a pure CSS solution.
tags/v1.0^2
| @@ -17,30 +17,3 @@ $(window).scroll(function(e){ | |||||
| }); | }); | ||||
| lastVertPos = currVertPos; | lastVertPos = currVertPos; | ||||
| }); | }); | ||||
| /* | |||||
| * Make the dimensions of the vimeo video fluid. | |||||
| */ | |||||
| (function adjustVimeoDimensions(){ | |||||
| var iframe = $("iframe#vimeo")[0]; | |||||
| var videoRatio = (iframe.height / iframe.width) * 100; | |||||
| iframe.style.position = "absolute"; | |||||
| iframe.style.top = "0"; | |||||
| iframe.style.left = "0"; | |||||
| iframe.width = "100%"; | |||||
| iframe.height = "100%"; | |||||
| iframe.style.height = ""; | |||||
| iframe.style.width = ""; | |||||
| var wrap = document.createElement("div"); | |||||
| wrap.className = "fluid-vids"; | |||||
| wrap.style.width = "100%"; | |||||
| wrap.style.position = "relative"; | |||||
| wrap.style.paddingTop = videoRatio + "%"; | |||||
| var iframeParent = iframe.parentNode; | |||||
| iframeParent.insertBefore(wrap, iframe); | |||||
| wrap.appendChild(iframe); | |||||
| }()); | |||||
| @@ -51,9 +51,20 @@ div.section | |||||
| &#top | &#top | ||||
| margin-top: 0px | margin-top: 0px | ||||
| iframe#vimeo | |||||
| border: 1px solid $baseColor3 | |||||
| margin-top: 40px | |||||
| div#wrap | |||||
| width: 100% | |||||
| position: relative | |||||
| padding-top: 56.782% // aspect ration, 9 / 16 | |||||
| iframe#vimeo | |||||
| border: 1px solid $baseColor3 | |||||
| margin-top: 40px | |||||
| position: absolute | |||||
| top: 0 | |||||
| left: 0 | |||||
| height: none | |||||
| width: none | |||||
| div.centered | div.centered | ||||
| font-size: 110% | font-size: 110% | ||||
| @@ -29,8 +29,10 @@ | |||||
| and symbols (function, class, and variable names), amongst other attributes. | and symbols (function, class, and variable names), amongst other attributes. | ||||
| Watch our introductory video: | Watch our introductory video: | ||||
| <iframe id="vimeo" src="//player.vimeo.com/video/98697078" width="317" height="180" frameborder="0" | |||||
| webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |||||
| <div id="wrap"> | |||||
| <iframe id="vimeo" src="//player.vimeo.com/video/98697078" width="100%" height="100%" frameborder="0" | |||||
| webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||