Browse Source

Replace scalable-video JS solution with pure CSS.

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
Severyn Kozak 9 years ago
parent
commit
82f44c47ed
3 changed files with 18 additions and 32 deletions
  1. +0
    -27
      static/js/about.js
  2. +14
    -3
      static/sass/about.sass
  3. +4
    -2
      templates/about.html

+ 0
- 27
static/js/about.js View File

@@ -17,30 +17,3 @@ $(window).scroll(function(e){
});
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);
}());

+ 14
- 3
static/sass/about.sass View File

@@ -51,9 +51,20 @@ div.section
&#top
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
font-size: 110%


+ 4
- 2
templates/about.html View File

@@ -29,8 +29,10 @@
and symbols (function, class, and variable names), amongst other attributes.

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>



Loading…
Cancel
Save