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 80 matching lines @@
 {
   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;
+  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;
 }