Unified Diff: static/css/video.css
Issue 29703633:
Noissue - Abstracted embedded video for use in blog (Closed)
Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Moved no-js application and iframe height+width
Created Feb. 20, 2018, 10:35 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« includes/scripts/initialize-videos.html ('K')
|
« static/css/index.css ('k')
|
static/js/index.js » ('j')
|
static/js/video.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: static/css/video.css |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/static/css/video.css |
| @@ -0,0 +1,83 @@ |
| +.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.contains-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; |
| +} |
| + |
| +.no-js .video-thumbnail, |
| +.contains-disclaimer .video-thumbnail |
| +{ |
| + opacity: 0.2; |
| +} |
| + |
| +.video-disclaimer |
|
ire
2018/02/22 09:25:41
There's no horizontal padding on this element, the
juliandoucette
2018/02/23 13:31:07
Good catch. Done.
|
| +{ |
| + 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, |
| +.contains-disclaimer .video-disclaimer |
|
ire
2018/02/22 09:25:41
Suggest: Have the .contains-declaimer class applie
juliandoucette
2018/02/23 13:31:07
Good idea. Done.
|
| +{ |
| + visibility: visible; |
| + opacity: 1; |
| +} |
| + |
| +.video-play |
| +{ |
| + position: absolute; |
| + top: 50%; |
| + left: 50%; |
| + width: 80px; |
| + margin-top: -40px; |
| + margin-left: -40px; |
| +} |
| + |
| +.no-js .video-play, |
| +.contains-disclaimer .video-play |
| +{ |
| + margin-top: -60px; |
| +} |
« includes/scripts/initialize-videos.html ('K')
|
« static/css/index.css ('k')
|
static/js/index.js » ('j')
|
static/js/video.js » ('J')
