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

static/css/index.css

Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -59,39 +59,98 @@
 }
 
 #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
+{
+  display: block;
+  position: relative;

[juliandoucette, 2017/10/13 12:20:11]

NIT: I don't think that this does anything?

[ire, 2017/10/16 08:28:01]

The #video-play icon is positioned absolutely in the center of the thumbnail. On
mobile devices without JS, when the disclaimer text is below the image, this
matters otherwise the #video-play icon will be positioned to the center of the
#video-container

[juliandoucette, 2017/10/16 12:22:01]

Acknowledged.

+  width: 100%;

[juliandoucette, 2017/10/13 12:20:11]

NIT: I don't think that this does anything?

[ire, 2017/10/16 08:28:00]

It keeps the <iframe id="video"> from extending outside the container 

[juliandoucette, 2017/10/16 12:22:01]

Acknowledged.

+}
+
+#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;

[juliandoucette, 2017/10/13 12:20:11]

NIT: I don't think that this does anything?

[ire, 2017/10/16 08:28:00]

Done.

+  margin: 20px;
+  background-color: #fff;
+  font-size: 0.9em;
+  text-align: center;
+  transition: opacity 0.8s;
+}
+
+.no-js #video-disclaimer,
+.show-disclaimer #video-disclaimer
+{
+  visibility: visible;
+  opacity: 1;
+}
+
+#video-play

[juliandoucette, 2017/10/13 12:20:11]

NIT/Suggest: Move this up a little bit on desktop after the first click

[ire, 2017/10/16 08:28:00]

Done.

+{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100px;

[juliandoucette, 2017/10/13 12:20:11]

NIT: I think that this is too big?

[ire, 2017/10/16 08:28:00]

I'll change it to 80px so it'll be the same on mobile/desktop

[ire, 2017/10/16 08:28:00]

Done.

+  margin-top: -50px;
+  margin-left: -50px;
+}
+
 html[lang^="zh_"] #content.maxthon #maxthon-instruction
 {
   display: inline-block;
   padding: 0px;
 }
 
 #content.maxthon #feature-maxthon
 {