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> | ||||