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 46 matching lines @@
 {
   display: block;
 }
 
 #content.ua-android #adblock-browser-notification,
 #content.ua-ios #adblock-browser-notification
 {
   display: none;
 }
 
-#main, #video
+#main, #video-container
 {
   display: inline-block;
   vertical-align: top; /* Fix for https://bugzil.la/1320660 */
 }
 
-#video, #maxthon-instruction, #edge-teaser
+#video-container, #maxthon-instruction, #edge-teaser
 {
   background: #ffffff;
   padding: 10px;
   border: 1px solid #c9c9c9;
   box-shadow: 1px 1px 0 0 #dbdbdb;
 }
 
 #maxthon-instruction,
 html[lang^="zh_"] #content.maxthon #video,
 #content.maxthon #feature-free,
 #content.maxthon #terms-message,
 #feature-maxthon
 {
   display: none;
 }
 
+#video-container
+{
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 520px;
+}
+
+#video,
+#video img
+{
+  width: 100%;
+}
+
+#video,
+#video-disclaimer
+{
+  transition: opacity 0.8s;
+}
+
+#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
+{
+  visibility: visible;
+  opacity: 1;
+}
+
 html[lang^="zh_"] #content.maxthon #maxthon-instruction
 {
   display: inline-block;
   padding: 0px;
 }
 
 #content.maxthon #feature-maxthon
 {
   display: inline-block;
 }
@@ skipping 598 matching lines @@
   line-height: 1.4;
   color: #000;
   background-color: #fff;
   border: 2px solid #a1a1a1;
 }
 
 #ready-for-windows-notice
 {
   margin-bottom: 30px;
 }