full width front page video

dmd-web-and-mobile · Apr 2, 2016 · 4139bae · 4139bae
1 parent c1b3268
commit 4139bae
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 1 deletion.
diff --git a/www/wp-content/themes/ation2016/src/styles/components/_home.scss b/www/wp-content/themes/ation2016/src/styles/components/_home.scss
@@ -0,0 +1,24 @@
+html, body {
+	height: 100%;
+}
+
+.home-bg {
+	height: 100%;
+	width: 100%;
+}
+
+$video-height: $header-height;
+
+.videoWrapper {
+	position: relative;
+	padding-bottom: 56.25%; /* 16:9 */
+	padding-top: -$header-height;
+	height: 0;
+}
+.videoWrapper iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
diff --git a/www/wp-content/themes/ation2016/src/styles/site.scss b/www/wp-content/themes/ation2016/src/styles/site.scss
@@ -21,6 +21,7 @@ $header-height-sticky: 70px;
 
 @import 'components/header';
 @import 'components/mainsection';
+@import 'components/home';
 @import 'components/work';
 @import 'components/services';
 @import 'components/footer';

diff --git a/www/wp-content/themes/ation2016/static/styles/site.css b/www/wp-content/themes/ation2016/static/styles/site.css
@@ -5840,6 +5840,27 @@ header {
 section#content {
   margin-top: 100px; }
 
+html, body {
+  height: 100%; }
+
+.home-bg {
+  height: 100%;
+  width: 100%; }
+
+.videoWrapper {
+  position: relative;
+  padding-bottom: 56.25%;
+  /* 16:9 */
+  padding-top: -100px;
+  height: 0; }
+
+.videoWrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+
 .work-bar {
   background-color: #ff7200;
   color: white;

diff --git a/www/wp-content/themes/ation2016/static/styles/site.min.css b/www/wp-content/themes/ation2016/static/styles/site.min.css
diff --git a/www/wp-content/themes/ation2016/templates/page-home.twig b/www/wp-content/themes/ation2016/templates/page-home.twig
@@ -0,0 +1,10 @@
+{% extends 'base.twig' %}
+
+{% block content %}
+	<div class="home-bg">
+		<div class="videoWrapper">
+			<iframe src="https://player.vimeo.com/video/148449065" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+		</div>
+	</div>
+
+{% endblock %}