Issue 5727 - Implement non-embedded homepage video on abp.org

static/css/index.css

 #content h1, #content h2
 {
   font-size: 16px;
 }
 
 #content .sprite
 {
   background-image: url(../img/sprite-index.png);
 }
 
@@ skipping 77 matching lines @@
 }
 
 #video-container
 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
   max-width: 520px;
 }
 
-#video,
-#video img
-{
+#video
+{
+  display: block;
+  position: relative;
   width: 100%;
 }
 
-#video,
-#video-disclaimer
-{
+#video-thumbnail
+{
+  width: 100%;
   transition: opacity 0.8s;
+}
+
+.no-js #video-thumbnail,
+.show-disclaimer #video-thumbnail
+{
+  opacity: 0.2;
 }
 
 #video-disclaimer
 {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   bottom: 0;
   left: 0;
-  box-sizing: border-box;
   margin: 20px;
   background-color: #fff;
-  background-color: rgba(255,255,255,0.8);

[juliandoucette, 2017/10/11 15:52:37]

NIT: I think this opacity makes a negligible difference

   font-size: 0.9em;
   text-align: center;
-}
-
-#video-container:hover a#video,
-#video-container:focus a#video,
-.no-js #video
-{
-  opacity: 0.2;
-}
-
-#video-container:hover a#video + #video-disclaimer,
-#video-container:focus a#video + #video-disclaimer,
-.no-js #video-disclaimer
+  transition: opacity 0.8s;
+}
+
+.no-js #video-disclaimer,
+.show-disclaimer #video-disclaimer
 {
   visibility: visible;
   opacity: 1;
+}
+
+#video-play
+{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80px;
+  margin-top: -40px;
+  margin-left: -40px;
+}
+
+.no-js #video-play,
+.show-disclaimer #video-play
+{
+  margin-top: -60px;
 }
 
 html[lang^="zh_"] #content.maxthon #maxthon-instruction
 {
   display: inline-block;
   padding: 0px;
 }
 
 #content.maxthon #feature-maxthon
 {
@@ skipping 600 matching lines @@
   line-height: 1.4;
   color: #000;
   background-color: #fff;
   border: 2px solid #a1a1a1;
 }
 
 #ready-for-windows-notice
 {
   margin-bottom: 30px;
 }