From 13d3419cd57179ce4114c88cc43ad02555d5cb9a Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Thu, 7 Dec 2017 23:40:14 +0530
Subject: [PATCH 01/14] video cover

---
 .../static/ungleich_page/css/ungleich.css     | 25 +++++++++++++++++++
 .../ungleich_page/includes/_header.html       | 15 +++++++++--
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index e2984c07..164523ae 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -256,6 +256,31 @@
     background-position: center;
 }
 
+.bg_vid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+}
+
+@media (min-aspect-ratio: 16/9) {
+  .bg_vid > video {
+    width: 100%;
+    height: auto;
+  }
+}
+
+@media (max-aspect-ratio: 16/9) {
+  .bg_vid > video {
+    width: auto;
+    height: 100%;
+  }
+}
+
 .timeline>li .timeline-panel {
     display: flex;
     flex-direction: column;
diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index e9a8a62a..ac677594 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -12,7 +12,12 @@
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
       <div class="item active">
-        <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/header-bg.jpg' %})"></div>
+        <div class="bg_vid">
+          <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bg_vid" autoplay muted loop>
+            <source src="https://www.videvo.net/videvo_files/converted/2013_08/preview/hd0933.mov68938.webm" type="video/webm">
+            <source src="https://www.videvo.net/videvo_files/converted/2013_08/preview/hd0933.mov68938.mp4" type="video/mp4">
+          </video>
+        </div>
         <div class="container">
           <div class="intro-cap">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
@@ -22,7 +27,13 @@
         </div>
       </div>
       <div class="item">
-        <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div>
+        <!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
+        <div class="bg_vid">
+          <video poster="//ak8.picdn.net/shutterstock/videos/16400158/thumb/1.jpg" id="bg_vid" autoplay muted loop>
+            <source type="video/mp4" src="//ak8.picdn.net/shutterstock/videos/16400158/preview/stock-footage-abstract-blue-geometrical-background-with-moving-lines-and-dots-looping-cg-animation.mp4">
+            <source type="video/webm" src="//ak8.picdn.net/shutterstock/videos/16400158/preview/stock-footage-abstract-blue-geometrical-background-with-moving-lines-and-dots-looping-cg-animation.webm">
+          </video>
+        </div>
         <div class="container">
           <div class="intro-cap">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}

From aba0fa4256d6a401e4fc2515492b18bea2494995 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 8 Dec 2017 02:00:59 +0530
Subject: [PATCH 02/14] video urls changed

---
 .../static/ungleich_page/css/ungleich.css      | 18 +++++++++++++++---
 .../ungleich_page/includes/_header.html        | 10 ++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 164523ae..780c0dbb 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -152,8 +152,20 @@
     height: 100%;
 }
 
+.header_slider .carousel-indicators {
+    width: 100%;
+    left: 0;
+    margin-left: 0;
+}
+
+.header_slider .carousel-indicators li {
+    margin-right: 25px;
+    width: 16px;
+    height: 16px;
+}
+
 .header_slider .carousel-indicators li.active {
-  background-color: #ffffff;
+    background-color: #ffffff;
 }
 
 .header_slider .carousel-control {
@@ -234,12 +246,12 @@
     }
 
     .header_slider .carousel-indicators li {
-        margin: 1px 7px;
+        margin: 1px 25px;
         width: 16px;
         height: 16px;
     }
     .header_slider .carousel-indicators li.active {
-        margin: 0 7px;
+        margin: 0 25px;
         width: 18px;
         height: 18px;
     }
diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index ac677594..f3e76a4e 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -13,9 +13,8 @@
     <div class="carousel-inner" role="listbox">
       <div class="item active">
         <div class="bg_vid">
-          <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bg_vid" autoplay muted loop>
-            <source src="https://www.videvo.net/videvo_files/converted/2013_08/preview/hd0933.mov68938.webm" type="video/webm">
-            <source src="https://www.videvo.net/videvo_files/converted/2013_08/preview/hd0933.mov68938.mp4" type="video/mp4">
+          <video id="bg_vid" autoplay muted loop>
+            <source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4" type="video/mp4">
           </video>
         </div>
         <div class="container">
@@ -29,9 +28,8 @@
       <div class="item">
         <!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
         <div class="bg_vid">
-          <video poster="//ak8.picdn.net/shutterstock/videos/16400158/thumb/1.jpg" id="bg_vid" autoplay muted loop>
-            <source type="video/mp4" src="//ak8.picdn.net/shutterstock/videos/16400158/preview/stock-footage-abstract-blue-geometrical-background-with-moving-lines-and-dots-looping-cg-animation.mp4">
-            <source type="video/webm" src="//ak8.picdn.net/shutterstock/videos/16400158/preview/stock-footage-abstract-blue-geometrical-background-with-moving-lines-and-dots-looping-cg-animation.webm">
+          <video id="bg_vid" autoplay muted loop>
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
         </div>
         <div class="container">

From d723e4b1e4925b82a073208287eeb9d44f428b31 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 8 Dec 2017 02:03:33 +0530
Subject: [PATCH 03/14] video for 3rd slide

---
 ungleich_page/templates/ungleich_page/includes/_header.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index f3e76a4e..72ab4c89 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -41,7 +41,11 @@
         </div>
       </div>
       <div class="item">
-        <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/portfolio/startup-framework-preview.jpg' %})"></div>
+        <div class="bg_vid">
+          <video id="bg_vid" autoplay muted loop>
+            <source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4" type="video/mp4">
+          </video>
+        </div>
         <div class="container">
           <div class="intro-cap">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}

From 207064ed64942277046ff30aef8a57ebfc50edb5 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 8 Dec 2017 03:19:20 +0530
Subject: [PATCH 04/14] text shadow added

---
 ungleich_page/static/ungleich_page/css/ungleich.css      | 9 ++++++++-
 .../templates/ungleich_page/includes/_header.html        | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 780c0dbb..7154311b 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -186,6 +186,11 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
+    /*background: rgba(0,0,0,0.5);*/
+}
+
+.header_slider > .carousel .item {
+    background: rgba(0,0,0,0.5);
 }
 
 .header_slider .intro-cap {
@@ -193,6 +198,7 @@
     line-height: 1.1;
     font-size: 23px;
     margin-bottom: 12px;
+    text-shadow: 0px 3px 15px #000;
 }
 
 .header_slider .btn-trans {
@@ -203,7 +209,8 @@
 
 @media (min-width: 768px) {
     .header_slider .intro-cap {
-        font-size: 2.25em;
+        font-size: 4em;
+        font-weight: 600;
         margin-bottom: 20px;
     }
     .header_slider .carousel-control {
diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index 72ab4c89..02eb2a4d 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -1,7 +1,7 @@
 {% load static i18n %}
 
 <header class="header_slider">
-  <div id="carousel-header-ungleich" class="carousel slide" data-interval="2000">
+  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>

From 8af5e2d0af04569146aa401c391518599a4cb2b8 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 8 Dec 2017 03:26:11 +0530
Subject: [PATCH 05/14] overlay

---
 ungleich_page/static/ungleich_page/css/ungleich.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 7154311b..880e6bc0 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -186,7 +186,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    /*background: rgba(0,0,0,0.5);*/
+    background: rgba(0,0,0,0.5);
 }
 
 .header_slider > .carousel .item {

From 288416ede93d4a612982879cee3d6e43fa15bde1 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Sat, 9 Dec 2017 04:37:37 +0530
Subject: [PATCH 06/14] header text background options

---
 .../static/ungleich_page/css/ungleich.css     | 48 ++++++++++++++++++-
 .../ungleich_page/includes/_header.html       | 14 +++---
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 880e6bc0..8b984c4f 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -3,6 +3,7 @@
     border: 2px solid #fff;
     padding: 4px 18px;
     letter-spacing: 0.6px;
+    background: rgba(0,0,0,0.35);
 }
 
 .btn-trans:focus,
@@ -186,7 +187,7 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    background: rgba(0,0,0,0.5);
+    /* background: rgba(0,0,0,0.5); */
 }
 
 .header_slider > .carousel .item {
@@ -198,7 +199,7 @@
     line-height: 1.1;
     font-size: 23px;
     margin-bottom: 12px;
-    text-shadow: 0px 3px 15px #000;
+    padding: 30px;
 }
 
 .header_slider .btn-trans {
@@ -244,6 +245,7 @@
     text-align: right;
     line-height: 1.4;
     margin-bottom: 20px;
+    padding: 15px;
 }
 
 @media (max-width: 768px) {
@@ -344,4 +346,46 @@
     .timeline>li .timeline-panel {
         min-height: 170px;
     }
+}
+
+.header_slider_box {
+    position: relative;
+    text-shadow: 0px 3px 5px rgba(0,0,0,0.5);
+    background: rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px rgba(0,0,0,0.7);
+}
+
+.cam_corner:after,
+.cam_corner:before{
+    position: absolute;
+    content: ' ';
+    z-index: 5;
+    width: 50px;
+    height: 50px;
+    background: transparent;
+    display: block;
+}
+
+.cam_corner:after {
+    top: -2px;
+    right: -2px;
+    border-top: 2px solid rgba(255,255,255,0.5);
+    border-right: 2px solid rgba(255,255,255,0.5);
+}
+
+.cam_corner:before {
+    bottom: -2px;
+    left: -2px;
+    border-bottom: 2px solid rgba(255,255,255,0.5);
+    border-left: 2px solid rgba(255,255,255,0.5);
+}
+
+.bg_vid_back:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.35);
 }
\ No newline at end of file
diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index 02eb2a4d..53880208 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -13,21 +13,21 @@
     <div class="carousel-inner" role="listbox">
       <div class="item active">
         <div class="bg_vid">
-          <video id="bg_vid" autoplay muted loop>
-            <source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4" type="video/mp4">
+          <video id="bg_vid" autoplay muted>
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
         </div>
         <div class="container">
-          <div class="intro-cap">
+          <div class="intro-cap header_slider_box cam_corner">
             {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
           </div>
-          <p class="intro_lead">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
+          <p class="intro_lead header_slider_box">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
           <a class="btn btn-trans" href="">Learn More</a>
         </div>
       </div>
       <div class="item">
         <!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
-        <div class="bg_vid">
+        <div class="bg_vid bg_vid_back">
           <video id="bg_vid" autoplay muted loop>
             <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
@@ -42,8 +42,8 @@
       </div>
       <div class="item">
         <div class="bg_vid">
-          <video id="bg_vid" autoplay muted loop>
-            <source src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4" type="video/mp4">
+          <video id="bg_vid" autoplay muted>
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
         </div>
         <div class="container">

From 2747460184af32dc9e0810117988faf88f76c8d3 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Sat, 9 Dec 2017 05:03:46 +0530
Subject: [PATCH 07/14] auto slide carousel

---
 ungleich_page/templates/ungleich_page/includes/_header.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index 53880208..a704d7ad 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -1,7 +1,7 @@
 {% load static i18n %}
 
 <header class="header_slider">
-  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
+  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000" data-ride="carousel">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>

From 955331f64bf388b3bebef0ebe007bfb6604d0f9d Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 15 Dec 2017 01:34:07 +0530
Subject: [PATCH 08/14] carousel height changed to min height, other style
 fixes

---
 .../static/ungleich_page/css/ungleich.css     | 31 ++++++++++++-------
 .../ungleich_page/includes/_header.html       | 26 ++++++++--------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 8b984c4f..082354e7 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -1,3 +1,9 @@
+@media (min-width: 768px) and (max-width: 991px) {
+    .navbar > .container {
+        width: 100%;
+    }
+}
+
 .btn-trans {
     color: #fff;
     border: 2px solid #fff;
@@ -143,14 +149,14 @@
     }
 }
 
-.header_slider {
-    height: 95vh;
+.header_slider > .carousel .carousel-inner {
+    min-height: 95vh;
+    display: flex;
 }
 
-.header_slider > .carousel,
-.header_slider > .carousel .carousel-inner,
-.header_slider > .carousel .item {
-    height: 100%;
+.header_slider > .carousel .carousel-inner > .next,
+.header_slider > .carousel .carousel-inner > .prev {
+    bottom: 0;
 }
 
 .header_slider .carousel-indicators {
@@ -180,6 +186,11 @@
     margin-top: -50px;
 }
 
+.header_slider > .carousel .item {
+    background: rgba(0,0,0,0.5);
+    flex: 1;
+}
+
 .header_slider > .carousel .item .container {
     overflow: auto;
     padding: 50px 20px 60px;
@@ -190,16 +201,12 @@
     /* background: rgba(0,0,0,0.5); */
 }
 
-.header_slider > .carousel .item {
-    background: rgba(0,0,0,0.5);
-}
-
 .header_slider .intro-cap {
     text-align: right;
     line-height: 1.1;
     font-size: 23px;
     margin-bottom: 12px;
-    padding: 30px;
+    padding: 30px 0;
 }
 
 .header_slider .btn-trans {
@@ -245,7 +252,7 @@
     text-align: right;
     line-height: 1.4;
     margin-bottom: 20px;
-    padding: 15px;
+    padding: 15px 0;
 }
 
 @media (max-width: 768px) {
diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index a704d7ad..5f61351d 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -1,7 +1,7 @@
 {% load static i18n %}
 
 <header class="header_slider">
-  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000" data-ride="carousel">
+  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
@@ -12,43 +12,43 @@
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
       <div class="item active">
-        <div class="bg_vid">
-          <video id="bg_vid" autoplay muted>
-            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
+        <div class="bg_vid bg_vid_back">
+          <video autoplay muted loop>
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nico-cable.mp4">
           </video>
         </div>
         <div class="container">
-          <div class="intro-cap header_slider_box cam_corner">
-            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+          <div class="intro-cap">
+            {% trans "We  Design, Configure &amp; Maintain<br>Your Linux Infrastructure " %}
           </div>
-          <p class="intro_lead header_slider_box">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
+          <p class="intro_lead">Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you.</p>
           <a class="btn btn-trans" href="">Learn More</a>
         </div>
       </div>
       <div class="item">
         <!-- <div class="bg_img" style="background-image:url({% static 'ungleich_page/img/glasfaser/header-nico-sans.jpg' %})"></div> -->
         <div class="bg_vid bg_vid_back">
-          <video id="bg_vid" autoplay muted loop>
+          <video autoplay muted loop>
             <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
           </video>
         </div>
         <div class="container">
           <div class="intro-cap">
-            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+            {% trans "We  Design, Configure &amp; Maintain<br>Your Linux Infrastructure " %}
           </div>
           <p class="intro_lead">Ruby on Rails, Django, Nothing else.</p>
           <a class="btn btn-trans" href="">Learn More</a>
         </div>
       </div>
       <div class="item">
-        <div class="bg_vid">
-          <video id="bg_vid" autoplay muted>
-            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/applause.mp4">
+        <div class="bg_vid bg_vid_back">
+          <video autoplay muted loop>
+            <source type="video/mp4" src="https://s3.ap-south-1.amazonaws.com/tiwariav-ungleich/nanos.mp4">
           </video>
         </div>
         <div class="container">
           <div class="intro-cap">
-            {% trans "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure " %}
+            {% trans "We  Design, Configure &amp; Maintain<br>Your Linux Infrastructure " %}
           </div>
           <a class="btn btn-trans" href="">Learn More</a>
         </div>

From 66d1e4e046c45ca3143e53c3274f929976aac690 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 19 Dec 2017 19:53:06 +0530
Subject: [PATCH 09/14] padding fix for text

---
 ungleich_page/static/ungleich_page/css/ungleich.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 082354e7..2e4a3d2d 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -206,7 +206,6 @@
     line-height: 1.1;
     font-size: 23px;
     margin-bottom: 12px;
-    padding: 30px 0;
 }
 
 .header_slider .btn-trans {
@@ -252,7 +251,7 @@
     text-align: right;
     line-height: 1.4;
     margin-bottom: 20px;
-    padding: 15px 0;
+    padding: 5px 0;
 }
 
 @media (max-width: 768px) {

From 80e08c1b4066a1a86fb833ac53accc74a938053f Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Tue, 19 Dec 2017 22:25:27 +0530
Subject: [PATCH 10/14] video cms plugin

---
 ungleich_page/cms_plugins.py                  | 25 +++++++++++-
 .../migrations/0016_auto_20171219_1856.py     | 39 +++++++++++++++++++
 ungleich_page/models.py                       | 35 ++++++++++++++++-
 .../static/ungleich_page/css/ungleich.css     | 17 +++++---
 .../ungleich_page/includes/_header.html       |  2 +-
 .../ungleich_page/ungleich/_header_item.html  | 18 +++------
 .../ungleich/_header_video_item.html          | 20 ++++++++++
 .../ungleich/header_with_slider.html          | 31 ++++++++++-----
 8 files changed, 155 insertions(+), 32 deletions(-)
 create mode 100644 ungleich_page/migrations/0016_auto_20171219_1856.py
 create mode 100644 ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html

diff --git a/ungleich_page/cms_plugins.py b/ungleich_page/cms_plugins.py
index c8dbe735..ca36ba9e 100644
--- a/ungleich_page/cms_plugins.py
+++ b/ungleich_page/cms_plugins.py
@@ -5,7 +5,8 @@ from .models import (
     UngelichContactUsSection, UngelichTextSection, Service, ServiceItem,
     About, AboutItem, SectionWithImage, UngleichServiceItem, UngleichHeader,
     UngleichHeaderItem, UngleichProductItem, UngleichProduct, UngleichCustomer,
-    UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader
+    UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader,
+    UngleichHeaderItemWithVideo
 )
 
 
@@ -200,7 +201,10 @@ class UngleichHeaderWithTextAndImageSliderPlugin(CMSPluginBase):
     render_template = "ungleich_page/ungleich/header_with_slider.html"
     cache = False
     allow_children = True
-    child_classes = ['UngleichHeaderItemPlugin']
+    child_classes = [
+        'UngleichHeaderItemPlugin',
+        'UngleichHeaderItemWithVideoPlugin',
+    ]
 
     def render(self, context, instance, placeholder):
         context['instance'] = instance
@@ -224,6 +228,23 @@ class UngleichHeaderItemPlugin(CMSPluginBase):
         return context
 
 
+@plugin_pool.register_plugin
+class UngleichHeaderItemWithVideoPlugin(CMSPluginBase):
+    name = "ungleich Header Item With Video Plugin"
+    model = UngleichHeaderItemWithVideo
+    render_template = "ungleich_page/ungleich/_header_video_item.html"
+    cache = False
+    require_parent = True
+    parent_classes = ['UngleichHeaderWithTextAndImageSliderPlugin']
+
+    def render(self, context, instance, placeholder):
+        context = super(UngleichHeaderItemWithVideoPlugin, self).render(
+            context, instance, placeholder
+        )
+        context['instance'] = instance
+        return context
+
+
 @plugin_pool.register_plugin
 class UngleichProductsPlugin(CMSPluginBase):
     name = "ungleich Products Plugin"
diff --git a/ungleich_page/migrations/0016_auto_20171219_1856.py b/ungleich_page/migrations/0016_auto_20171219_1856.py
new file mode 100644
index 00000000..efde30c9
--- /dev/null
+++ b/ungleich_page/migrations/0016_auto_20171219_1856.py
@@ -0,0 +1,39 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2017-12-19 16:11
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+import filer.fields.file
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('ungleich_page', '0015_ungleichsimpleheader'),
+        ('cms', '0014_auto_20160404_1908'),
+        ('filer', '0005_auto_20171219_1856'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='UngleichHeaderItemWithVideo',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE,
+                                                       parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
+                ('description', models.TextField(blank=True, null=True)),
+                ('image', filer.fields.image.FilerImageField(blank=True, null=True,
+                                                             on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_poster', to='filer.Image')),
+                ('btn_link', models.URLField(blank=True, null=True)),
+                ('btn_text', models.CharField(blank=True, max_length=50, null=True)),
+                ('heading', models.CharField(blank=True, max_length=100, null=True)),
+                ('video', filer.fields.file.FilerFileField(blank=True, null=True,
+                                                           on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_video', to='filer.File')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+    ]
diff --git a/ungleich_page/models.py b/ungleich_page/models.py
index aec629ee..1b5ab960 100644
--- a/ungleich_page/models.py
+++ b/ungleich_page/models.py
@@ -1,7 +1,7 @@
 from cms.models.pluginmodel import CMSPlugin
 from django.db import models
 from djangocms_text_ckeditor.fields import HTMLField
-from filer.fields.image import FilerImageField
+from filer.fields.image import FilerImageField, FilerFileField
 
 
 class UngelichPicture(CMSPlugin):
@@ -134,6 +134,39 @@ class UngleichHeaderItem(CMSPlugin):
     description = HTMLField()
 
 
+class UngleichHeaderItemWithVideo(CMSPlugin):
+    image = FilerImageField(
+        null=True,
+        blank=True,
+        related_name="ungleich_header_item_poster",
+        on_delete=models.SET_NULL,
+        help_text='The background image or poster image for video.'
+    )
+    video = FilerFileField(
+        null=True,
+        blank=True,
+        related_name="ungleich_header_item_video",
+        on_delete=models.SET_NULL,
+        help_text='Leavig this blank will make the image as the background.'
+    )
+    heading = models.CharField(
+        blank=True, null=True, max_length=100,
+        help_text='An optional title for this slide.',
+    )
+    description = models.TextField(
+        blank=True, null=True,
+        help_text='An optional description for this slide.'
+    )
+    btn_link = models.URLField(
+        blank=True, null=True,
+        help_text='If this field is left empty, no button would be displayed.'
+    )
+    btn_text = models.CharField(
+        blank=True, null=True, max_length=50,
+        help_text='Text for the button, if a link is provided.'
+    )
+
+
 class UngleichProductItem(ServiceItem):
     url = models.URLField(max_length=300, default="", blank=True)
 
diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index 2e4a3d2d..e2f2165f 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -202,10 +202,11 @@
 }
 
 .header_slider .intro-cap {
+    margin: 0;
     text-align: right;
     line-height: 1.1;
     font-size: 23px;
-    margin-bottom: 12px;
+    padding-bottom: 10px;
 }
 
 .header_slider .btn-trans {
@@ -216,9 +217,7 @@
 
 @media (min-width: 768px) {
     .header_slider .intro-cap {
-        font-size: 4em;
-        font-weight: 600;
-        margin-bottom: 20px;
+        font-size: 2.5em;
     }
     .header_slider .carousel-control {
         width: 50px;
@@ -237,6 +236,12 @@
         overflow: auto;
         padding: 75px 50px;
     }
+    .header_slider .btn-trans {
+        padding: 8px 15px;
+        min-width: 175px;
+        letter-spacing: 1px;
+        font-size: 1.25em;
+    }
 }
 
 @media (min-width: 992px) {
@@ -250,8 +255,8 @@
     font-size: 1.55em;
     text-align: right;
     line-height: 1.4;
-    margin-bottom: 20px;
-    padding: 5px 0;
+    margin-bottom: 0;
+    padding-bottom: 10px;
 }
 
 @media (max-width: 768px) {
diff --git a/ungleich_page/templates/ungleich_page/includes/_header.html b/ungleich_page/templates/ungleich_page/includes/_header.html
index 5f61351d..4819ec1e 100644
--- a/ungleich_page/templates/ungleich_page/includes/_header.html
+++ b/ungleich_page/templates/ungleich_page/includes/_header.html
@@ -1,7 +1,7 @@
 {% load static i18n %}
 
 <header class="header_slider">
-  <div id="carousel-header-ungleich" class="carousel slide" data-interval="8000">
+  <div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="8000">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-header-ungleich" data-slide-to="0" class="active"></li>
diff --git a/ungleich_page/templates/ungleich_page/ungleich/_header_item.html b/ungleich_page/templates/ungleich_page/ungleich/_header_item.html
index a770d1ed..a14c4451 100644
--- a/ungleich_page/templates/ungleich_page/ungleich/_header_item.html
+++ b/ungleich_page/templates/ungleich_page/ungleich/_header_item.html
@@ -1,14 +1,8 @@
+{% if instance.image %}
+  <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
+{% endif %}
 <div class="container">
-    <div>
-        {% if instance.image %}
-        <img src="{{ instance.image.url }}" alt=""
-             class="logo-image" img-responsive="" width="300"/>
-        <div class="header-vh"></div>
-        {% endif %}
-        <div>
-                <span class="intro-cap-sans-transform">
-                {{ instance.description }}
-                </span>
-        </div>
-    </div>
+  <div class="intro-cap-sans-transform">
+    {{ instance.description }}
+  </div>
 </div>
diff --git a/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html b/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html
new file mode 100644
index 00000000..8a27b6e4
--- /dev/null
+++ b/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html
@@ -0,0 +1,20 @@
+{% if instance.video %}
+  <div class="bg_vid bg_vid_back">
+    <video autoplay muted loop {% if instance.image %}poster="{{ instance.image.url }}"{% endif %}>
+      <source type="video/mp4" src="{{ instance.video.url }}">
+    </video>
+  </div>
+{% elif instance.image %}
+  <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
+{% endif %}
+<div class="container">
+  {% if instance.heading %}
+    <div class="intro-cap">{{ instance.heading }}</div>
+  {% endif %}
+  {% if instance.description %}
+    <p class="intro_lead">{{ instance.description }}</p>
+  {% endif %}
+  {% if instance.btn_link %}
+    <a class="btn btn-trans" href="{{ instance.btn_link }}">{{ instance.btn_text|default:"Learn More" }}</a>
+  {% endif %}
+</div>
diff --git a/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html b/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html
index 9cf759e6..8231a6b3 100644
--- a/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html
+++ b/ungleich_page/templates/ungleich_page/ungleich/header_with_slider.html
@@ -2,20 +2,31 @@
 <header class="header_slider" style="background-image: url({{ instance.background_image.url }})">
   <div id="carousel-header-ungleich" class="carousel slide" data-ride="carousel" data-interval="{{ instance.carousel_data_interval}}">
     <!-- Indicators -->
-      {% if instance.child_plugin_instances|length > 1  %}
-        <ol class="carousel-indicators">
-                {% for plugin in instance.child_plugin_instances %}
-                    <li data-target="#carousel-header-ungleich" data-slide-to="{{forloop.counter0}}" {% if forloop.counter0 == 0 %}class="active" {% endif %}></li>
-                {% endfor %}
-        </ol>
-      {% endif %}
+    {% if instance.child_plugin_instances|length > 1  %}
+      <ol class="carousel-indicators">
+        {% for plugin in instance.child_plugin_instances %}
+          <li data-target="#carousel-header-ungleich" data-slide-to="{{forloop.counter0}}" {% if forloop.counter0 == 0 %}class="active"{% endif %}></li>
+        {% endfor %}
+      </ol>
+    {% endif %}
     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">
-        {% for plugin in instance.child_plugin_instances %}
+      {% for plugin in instance.child_plugin_instances %}
         <div class="item {% if forloop.counter0 == 0 %}active{% endif %}">
-            {% render_plugin plugin %}
+          {% render_plugin plugin %}
         </div>
-        {% endfor %}
+      {% endfor %}
     </div>
+    <!-- Control Arrows -->
+    {% if instance.child_plugin_instances|length > 1  %}
+      <a class="left carousel-control" href="#carousel-header-ungleich" role="button" data-slide="prev">
+        <span class="fa fa-angle-left" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control" href="#carousel-header-ungleich" role="button" data-slide="next">
+        <span class="fa fa-angle-right" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+      </a>
+    {% endif %}
   </div>
 </header>
\ No newline at end of file

From 78ad99f7578f3c5d3dbc8a7d9f1f691a470c10f5 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Wed, 20 Dec 2017 01:05:40 +0530
Subject: [PATCH 11/14] fix migration

---
 ungleich_page/migrations/0016_auto_20171219_1856.py | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ungleich_page/migrations/0016_auto_20171219_1856.py b/ungleich_page/migrations/0016_auto_20171219_1856.py
index efde30c9..33fa4eaa 100644
--- a/ungleich_page/migrations/0016_auto_20171219_1856.py
+++ b/ungleich_page/migrations/0016_auto_20171219_1856.py
@@ -12,8 +12,6 @@ class Migration(migrations.Migration):
 
     dependencies = [
         ('ungleich_page', '0015_ungleichsimpleheader'),
-        ('cms', '0014_auto_20160404_1908'),
-        ('filer', '0005_auto_20171219_1856'),
     ]
 
     operations = [

From 88369d55a56d699656f17613577783707b83aaa0 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Wed, 20 Dec 2017 02:53:26 +0530
Subject: [PATCH 12/14] using new header slider

---
 ungleich_page/cms_plugins.py                  | 44 ++++++++++---------
 .../migrations/0017_auto_20171219_1856.py     | 24 +++++-----
 ungleich_page/models.py                       |  2 +-
 .../static/ungleich_page/css/ungleich.css     |  2 +-
 ...er_with_background_video_slider_item.html} | 11 +++--
 5 files changed, 47 insertions(+), 36 deletions(-)
 rename ungleich_page/templates/ungleich_page/ungleich/{_header_video_item.html => _header_with_background_video_slider_item.html} (74%)

diff --git a/ungleich_page/cms_plugins.py b/ungleich_page/cms_plugins.py
index 382a2f87..fb40ea2b 100644
--- a/ungleich_page/cms_plugins.py
+++ b/ungleich_page/cms_plugins.py
@@ -6,9 +6,9 @@ from .models import (
     About, AboutItem, SectionWithImage, UngleichServiceItem, UngleichHeader,
     UngleichHeaderItem, UngleichProductItem, UngleichProduct, UngleichCustomer,
     UngleichCustomerItem, UngleichHTMLOnly, UngleichSimpleHeader,
-    UngleichHeaderItemWithVideo,
     UngleichHeaderWithBackgroundImageSlider,
     UngleichHeaderWithBackgroundImageSliderItem,
+    UngleichHeaderWithBackgroundVideoSliderItem,
 )
 
 
@@ -203,10 +203,7 @@ class UngleichHeaderWithTextAndImageSliderPlugin(CMSPluginBase):
     render_template = "ungleich_page/ungleich/header_with_slider.html"
     cache = False
     allow_children = True
-    child_classes = [
-        'UngleichHeaderItemPlugin',
-        'UngleichHeaderItemWithVideoPlugin',
-    ]
+    child_classes = ['UngleichHeaderItemPlugin']
 
     def render(self, context, instance, placeholder):
         context['instance'] = instance
@@ -230,21 +227,6 @@ class UngleichHeaderItemPlugin(CMSPluginBase):
         return context
 
 
-@plugin_pool.register_plugin
-class UngleichHeaderItemWithVideoPlugin(CMSPluginBase):
-    name = "ungleich Header Item With Video Plugin"
-    model = UngleichHeaderItemWithVideo
-    render_template = "ungleich_page/ungleich/_header_video_item.html"
-    cache = False
-    require_parent = True
-    parent_classes = ['UngleichHeaderWithTextAndImageSliderPlugin']
-
-    def render(self, context, instance, placeholder):
-        context = super(UngleichHeaderItemWithVideoPlugin, self).render(
-            context, instance, placeholder
-        )
-
-
 @plugin_pool.register_plugin
 class UngleichHeaderBackgroundImageAndTextSliderPlugin(CMSPluginBase):
     name = "ungleich Header with Background and Image Slider Plugin"
@@ -254,13 +236,33 @@ class UngleichHeaderBackgroundImageAndTextSliderPlugin(CMSPluginBase):
     )
     cache = False
     allow_children = True
-    child_classes = ['UngleichHeaderBackgroundImageAndTextItemPlugin']
+    child_classes = [
+        'UngleichHeaderBackgroundImageAndTextItemPlugin',
+        'UngleichHeaderBackgroundVideoItemPlugin',
+    ]
 
     def render(self, context, instance, placeholder):
         context['instance'] = instance
         return context
 
 
+@plugin_pool.register_plugin
+class UngleichHeaderBackgroundVideoItemPlugin(CMSPluginBase):
+    name = "ungleich Header Background Video Item Plugin"
+    model = UngleichHeaderWithBackgroundVideoSliderItem
+    render_template = "ungleich_page/ungleich/_header_with_background_video_slider_item.html"
+    cache = False
+    require_parent = True
+    parent_classes = ['UngleichHeaderBackgroundImageAndTextSliderPlugin']
+
+    def render(self, context, instance, placeholder):
+        context = super(UngleichHeaderBackgroundVideoItemPlugin, self).render(
+            context, instance, placeholder
+        )
+        context['instance'] = instance
+        return context
+
+
 @plugin_pool.register_plugin
 class UngleichHeaderBackgroundImageAndTextItemPlugin(CMSPluginBase):
     name = "ungleich Header with Background and Image and Text Item Plugin"
diff --git a/ungleich_page/migrations/0017_auto_20171219_1856.py b/ungleich_page/migrations/0017_auto_20171219_1856.py
index 658d0ab2..14c137a9 100644
--- a/ungleich_page/migrations/0017_auto_20171219_1856.py
+++ b/ungleich_page/migrations/0017_auto_20171219_1856.py
@@ -1,5 +1,5 @@
 # -*- coding: utf-8 -*-
-# Generated by Django 1.9.4 on 2017-12-19 16:11
+# Generated by Django 1.9.4 on 2017-12-19 21:19
 from __future__ import unicode_literals
 
 from django.db import migrations, models
@@ -16,18 +16,22 @@ class Migration(migrations.Migration):
 
     operations = [
         migrations.CreateModel(
-            name='UngleichHeaderItemWithVideo',
+            name='UngleichHeaderWithBackgroundVideoSliderItem',
             fields=[
                 ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE,
                                                        parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')),
-                ('description', models.TextField(blank=True, null=True)),
-                ('image', filer.fields.image.FilerImageField(blank=True, null=True,
-                                                             on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_poster', to='filer.Image')),
-                ('btn_link', models.URLField(blank=True, null=True)),
-                ('btn_text', models.CharField(blank=True, max_length=50, null=True)),
-                ('heading', models.CharField(blank=True, max_length=100, null=True)),
-                ('video', filer.fields.file.FilerFileField(blank=True, null=True,
-                                                           on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_video', to='filer.File')),
+                ('description', models.TextField(
+                    blank=True, help_text='An optional description for this slide.', null=True)),
+                ('image', filer.fields.image.FilerImageField(blank=True, help_text='The background image or poster image for video.',
+                                                             null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_poster', to='filer.Image')),
+                ('btn_link', models.URLField(
+                    blank=True, help_text='If this field is left empty, no button would be displayed.', null=True)),
+                ('btn_text', models.CharField(
+                    blank=True, help_text='Text for the button, if a link is provided.', max_length=50, null=True)),
+                ('heading', models.CharField(
+                    blank=True, help_text='An optional title for this slide.', max_length=100, null=True)),
+                ('video', filer.fields.file.FilerFileField(blank=True, help_text='Leavig this blank will make the image as the background.',
+                                                           null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='ungleich_header_item_video', to='filer.File')),
             ],
             options={
                 'abstract': False,
diff --git a/ungleich_page/models.py b/ungleich_page/models.py
index 80eefa32..272ac433 100644
--- a/ungleich_page/models.py
+++ b/ungleich_page/models.py
@@ -155,7 +155,7 @@ class UngleichHeaderItem(CMSPlugin):
     description = HTMLField()
 
 
-class UngleichHeaderItemWithVideo(CMSPlugin):
+class UngleichHeaderWithBackgroundVideoSliderItem(CMSPlugin):
     image = FilerImageField(
         null=True,
         blank=True,
diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css
index e2f2165f..c52e0425 100644
--- a/ungleich_page/static/ungleich_page/css/ungleich.css
+++ b/ungleich_page/static/ungleich_page/css/ungleich.css
@@ -308,7 +308,7 @@
 
 @media (max-aspect-ratio: 16/9) {
   .bg_vid > video {
-    width: auto;
+    /* width: auto; */
     height: 100%;
   }
 }
diff --git a/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html b/ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html
similarity index 74%
rename from ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html
rename to ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html
index 8a27b6e4..bec2d092 100644
--- a/ungleich_page/templates/ungleich_page/ungleich/_header_video_item.html
+++ b/ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html
@@ -1,11 +1,16 @@
+{% if instance.image %}
+  <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
+{% endif %}
 {% if instance.video %}
   <div class="bg_vid bg_vid_back">
-    <video autoplay muted loop {% if instance.image %}poster="{{ instance.image.url }}"{% endif %}>
+    {% comment %}
+      use attribute poster="{{ instance.image.url }}" after cross browser testing
+      in place of .bg_img
+    {% endcomment %}
+    <video autoplay muted loop>
       <source type="video/mp4" src="{{ instance.video.url }}">
     </video>
   </div>
-{% elif instance.image %}
-  <div class="bg_img" style="background-image:url({{ instance.image.url }})"></div>
 {% endif %}
 <div class="container">
   {% if instance.heading %}

From 48eacef8ef38e4583dd8034073230daa847763a4 Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 22 Dec 2017 00:59:53 +0530
Subject: [PATCH 13/14] typographical fixes

---
 ungleich_page/models.py                                        | 2 +-
 .../ungleich/_header_with_background_video_slider_item.html    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ungleich_page/models.py b/ungleich_page/models.py
index 272ac433..ad44c161 100644
--- a/ungleich_page/models.py
+++ b/ungleich_page/models.py
@@ -168,7 +168,7 @@ class UngleichHeaderWithBackgroundVideoSliderItem(CMSPlugin):
         blank=True,
         related_name="ungleich_header_item_video",
         on_delete=models.SET_NULL,
-        help_text='Leavig this blank will make the image as the background.'
+        help_text='Leaving this blank will make the image as the background.'
     )
     heading = models.CharField(
         blank=True, null=True, max_length=100,
diff --git a/ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html b/ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html
index bec2d092..a576684f 100644
--- a/ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html
+++ b/ungleich_page/templates/ungleich_page/ungleich/_header_with_background_video_slider_item.html
@@ -20,6 +20,7 @@
     <p class="intro_lead">{{ instance.description }}</p>
   {% endif %}
   {% if instance.btn_link %}
-    <a class="btn btn-trans" href="{{ instance.btn_link }}">{{ instance.btn_text|default:"Learn More" }}</a>
+    {% trans "Learn More" as default_btn_text %}
+    <a class="btn btn-trans" href="{{ instance.btn_link }}">{{ instance.btn_text|default:default_btn_text }}</a>
   {% endif %}
 </div>

From fc9b901f9ad8033c5bfe7aad2bcc08a0010c431a Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Fri, 22 Dec 2017 01:06:55 +0530
Subject: [PATCH 14/14] translations added

---
 datacenterlight/locale/de/LC_MESSAGES/django.po | 5 ++++-
 ungleich_page/locale/de/LC_MESSAGES/django.po   | 9 ++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/datacenterlight/locale/de/LC_MESSAGES/django.po b/datacenterlight/locale/de/LC_MESSAGES/django.po
index c69f83d1..1dbdd2a0 100644
--- a/datacenterlight/locale/de/LC_MESSAGES/django.po
+++ b/datacenterlight/locale/de/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-11-13 17:59+0000\n"
+"POT-Creation-Date: 2017-12-22 01:00+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -316,6 +316,9 @@ msgstr ""
 msgid "Forgot password?"
 msgstr "Passwort vergessen?"
 
+msgid "Resend activation link"
+msgstr "Aktivierungslink noch einmal senden"
+
 msgid "Sign up"
 msgstr "Registrieren"
 
diff --git a/ungleich_page/locale/de/LC_MESSAGES/django.po b/ungleich_page/locale/de/LC_MESSAGES/django.po
index 873bb0df..4a8b2e5f 100644
--- a/ungleich_page/locale/de/LC_MESSAGES/django.po
+++ b/ungleich_page/locale/de/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2017-11-26 00:34+0530\n"
+"POT-Creation-Date: 2017-12-22 01:00+0530\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -157,8 +157,8 @@ msgstr "Copyright © ungleich GmbH"
 msgid "ungleich Home"
 msgstr "ungleich Home"
 
-msgid "We  Design, Configure &amp; Maintain <br> Your Linux Infrastructure "
-msgstr "Wir designen, erstellen und warten Ihre Linux-Infrastruktur"
+msgid "We  Design, Configure &amp; Maintain<br>Your Linux Infrastructure "
+msgstr "Wir designen, erstellen und warten<br>Ihre Linux-Infrastruktur"
 
 msgid "Our Products"
 msgstr "Unsere Produkte"
@@ -350,6 +350,9 @@ msgstr "WARUM UNGLEICH?"
 msgid "BLOG"
 msgstr "BLOG"
 
+msgid "Learn More"
+msgstr "erfahren Sie mehr"
+
 msgid "contact/$"
 msgstr "kontakt/$"