Noissue - Abstracted embedded video for use in blog

static/css/index.css

 #content
 {
   padding-top: 5em;
 }
 
 #key-facts h1
 {
   font-size: 16px;
 }
 
@@ skipping 51 matching lines @@
 {
   display: block;
 }
 
 #content.ua-android #adblock-browser-notification,
 #content.ua-ios #adblock-browser-notification
 {
   display: none;
 }
 
-#main, #video-container
+#main, #home-video

[juliandoucette, 2018/02/20 22:28:11]

Detail: I'm not sure if this is still necessary. I didn't test. I just kept it
to be safe.

 {
   display: inline-block;
   vertical-align: top; /* Fix for https://bugzil.la/1320660 */
 }
 
-#video-container, #maxthon-instruction, #edge-teaser
+#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,
+html[lang^="zh_"] #content.maxthon #home-video,
 #content.maxthon #feature-free,
 #content.maxthon #terms-message,
 #feature-maxthon
 {
   display: none;
 }
 
-#video-container
+#home-video
 {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
   max-width: 520px;
 }
 
-#video
-{
-  display: block;
-  position: relative;
-  width: 100%;
-}
-
-#video-thumbnail
-{
-  width: 100%;
-  transition: opacity 0.8s;
-}
-
-@media(min-width: 768px)
-{
-  #video-thumbnail
-  {
-    height: 275px;
-  }
-}
-
-.no-js #video-thumbnail,
-.show-disclaimer #video-thumbnail
-{
-  opacity: 0.2;
-}
-
-#video-disclaimer
-{
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  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
-{
-  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
 {
   display: inline-block;
 }
@@ skipping 337 matching lines @@
   background-position: -68px -151px;
 }
 
 #content h3.subscribe-header
 {
   font-size: 18px;
   margin-bottom: 0px;
 }
 
 #other-platform > div,
-#content.edge #video,
+#content.edge #home-video,
 #edge-teaser
 {
   display: none;
 }
 
 .warning-platform,
 .disclaimer,
 #maxthon-notification
 {
   display: none;
@@ skipping 147 matching lines @@
   line-height: 1.4;
   color: #000;
   background-color: #fff;
   border: 2px solid #a1a1a1;
 }
 
 #ready-for-windows-notice
 {
   margin-bottom: 30px;
 }