Side by Side 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.
| Left: | ||
| Right: |
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')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 .video-parent | |
| 2 { | |
| 3 position: relative; | |
| 4 display: block; | |
| 5 width: 100%; | |
| 6 padding: 0; | |
| 7 border: 1px solid #c9c9c9; | |
| 8 box-shadow: 1px 1px 0 0 #dbdbdb; | |
| 9 overflow: hidden; | |
| 10 } | |
| 11 | |
| 12 .video-parent.contains-iframe::before | |
| 13 { | |
| 14 display: block; | |
| 15 content: ""; | |
| 16 padding-top: 56.25%; | |
| 17 } | |
| 18 | |
| 19 .video-parent iframe | |
| 20 { | |
| 21 position: absolute; | |
| 22 top: 0; | |
| 23 bottom: 0; | |
| 24 left: 0; | |
| 25 width: 100%; | |
| 26 height: 100%; | |
| 27 border: 0; | |
| 28 } | |
| 29 | |
| 30 .video-link | |
| 31 { | |
| 32 display: block; | |
| 33 position: relative; | |
| 34 } | |
| 35 | |
| 36 .video-thumbnail | |
| 37 { | |
| 38 width: 100%; | |
| 39 transition: opacity 0.8s; | |
| 40 } | |
| 41 | |
| 42 .no-js .video-thumbnail, | |
| 43 .contains-disclaimer .video-thumbnail | |
| 44 { | |
| 45 opacity: 0.2; | |
| 46 } | |
| 47 | |
| 48 .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.
| |
| 49 { | |
| 50 visibility: hidden; | |
| 51 opacity: 0; | |
| 52 position: absolute; | |
| 53 bottom: 0; | |
| 54 left: 0; | |
| 55 margin: 20px; | |
| 56 background-color: #fff; | |
| 57 font-size: 0.9em; | |
| 58 text-align: center; | |
| 59 transition: opacity 0.8s; | |
| 60 } | |
| 61 | |
| 62 .no-js .video-disclaimer, | |
| 63 .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.
| |
| 64 { | |
| 65 visibility: visible; | |
| 66 opacity: 1; | |
| 67 } | |
| 68 | |
| 69 .video-play | |
| 70 { | |
| 71 position: absolute; | |
| 72 top: 50%; | |
| 73 left: 50%; | |
| 74 width: 80px; | |
| 75 margin-top: -40px; | |
| 76 margin-left: -40px; | |
| 77 } | |
| 78 | |
| 79 .no-js .video-play, | |
| 80 .contains-disclaimer .video-play | |
| 81 { | |
| 82 margin-top: -60px; | |
| 83 } | |
| OLD | NEW |
« includes/scripts/initialize-videos.html ('K')
|
« static/css/index.css ('k')
|
static/js/index.js » ('j')
|
static/js/video.js » ('J')
