Modified video CSS to small devices

renzon · renzon · commit becdd7803c1b · 2018-03-07T17:07:59.000-03:00
Related to #182
diff --git a/pythonpro/core/static/css/default.css b/pythonpro/core/static/css/default.css
@@ -51,4 +51,7 @@
 
 .rights {
     background-color: #82b641;
-}
+}
+
+.embed-container { position: relative; padding-bottom: 56.25%;  overflow: hidden; max-width: 100%; height: auto; }
+.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
diff --git a/pythonpro/core/templates/core/base.html b/pythonpro/core/templates/core/base.html
@@ -15,7 +15,7 @@
 <nav class="navbar navbar-dark bg-dark justify-content-between">
   <a class="navbar-brand" href="/">Python Pro</a>
   <form class="form-inline">
-    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Entrar</button>
+    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Entrar</button>
   </form>
 </nav>
 {% block body %}
diff --git a/pythonpro/core/templates/core/index.html b/pythonpro/core/templates/core/index.html
@@ -111,7 +111,7 @@ <h5 class="card-title text-center">Renzo Nuccitelli</h5>
     <div class="row">
       <div class="col">
         <h1 class="text-center mt-4 mb-3">Opinião de ex-aluno</h1>
-        <div style="margin: auto auto 0 0; text-align: center">
+        <div class="embed-container">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/3g0g4atd858" frameborder="0"
                   allowfullscreen></iframe>
         </div>
diff --git a/pythonpro/promos/templates/promos/video_detail.html b/pythonpro/promos/templates/promos/video_detail.html
@@ -6,8 +6,10 @@
     <div class="row">
       <div class="col text-center">
         <h1>{{ video.title }}</h1>
-        <iframe src="https://player.vimeo.com/video/{{ video.vimeo_id }}" width="640" height="360" frameborder="0"
-                webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <div class="embed-container">
+          <iframe src="https://player.vimeo.com/video/{{ video.vimeo_id }}" width="640" height="360" frameborder="0"
+                  webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        </div>
       </div>
     </div>
     {% include 'core/leads_form.html' only %}
