Index: static/css/main.css |
=================================================================== |
--- a/static/css/main.css |
+++ b/static/css/main.css |
@@ -711,8 +711,93 @@ |
} |
/* overriding display:none above */ |
#footer #social-list |
{ |
display: block; |
} |
} |
+ |
+/* Video |
+ ****************************************************************************/ |
+ |
+.video-parent |
+{ |
+ position: relative; |
+ display: block; |
+ width: 100%; |
+ padding: 0; |
+ border: 1px solid #c9c9c9; |
+ box-shadow: 1px 1px 0 0 #dbdbdb; |
+ overflow: hidden; |
+} |
+ |
+.video-parent.has-iframe::before |
+{ |
+ display: block; |
+ content: ""; |
+ padding-top: 56.25%; |
+} |
+ |
+.video-parent iframe |
+{ |
+ position: absolute; |
+ top: 0; |
+ bottom: 0; |
+ left: 0; |
+ width: 100%; |
+ height: 100%; |
+ border: 0; |
+} |
+ |
+.video-link |
+{ |
+ display: block; |
+ position: relative; |
+} |
+ |
+.video-thumbnail |
+{ |
+ width: 100%; |
+ transition: opacity 0.8s; |
+ opacity: 0.2; |
+} |
+ |
+.hide-disclaimer .video-thumbnail |
+{ |
+ opacity: 1; |
+} |
+ |
+.video-disclaimer |
+{ |
+ visibility: visible; |
+ opacity: 1; |
+ position: absolute; |
+ bottom: 0; |
+ left: 0; |
+ padding: 0 1em; |
+ background-color: #fff; |
+ font-size: 0.9em; |
+ text-align: center; |
+ transition: opacity 0.8s; |
+} |
+ |
+.hide-disclaimer .video-disclaimer |
+{ |
+ visibility: hidden; |
+ opacity: 0; |
+} |
+ |
+.video-play |
+{ |
+ position: absolute; |
+ top: 50%; |
+ left: 50%; |
+ width: 80px; |
+ margin-top: -60px; |
+ margin-left: -40px; |
+} |
+ |
+.hide-disclaimer .video-play |
+{ |
+ margin-top: -40px; |
+} |