comparison: theme/static/css/peertube.css
theme/static/css/peertube.css
- changeset 108
- 08c0c0d695e8
equal
deleted
inserted
replaced
| 104:8396e709bde5 | 108:08c0c0d695e8 |
|---|---|
| 1 * | |
| 2 * Responsive design style sheet for pelican PeerTube integration. | |
| 3 * Makes the video as wide as possible, keeping a specified aspect ratio | |
| 4 * of the video (e.g. 4:3, 16:9, etc. for width vs height). The video | |
| 5 * will resize and shrink as you resize the browser window. Enjoy! | |
| 6 * | |
| 7 * Integrate these definitions into your project style sheet, and use as | |
| 8 * | |
| 9 * <div class="peertube peertube-16x9"> | |
| 10 * <iframe src="https://your.peertube.instance/embed/VIDEO_ID" allowfullscreen seamless frameborder="0"></iframe> | |
| 11 * </div> | |
| 12 * | |
| 13 * (c) 2018 David Douard <david.douard@sdfa3.org>, license: MIT | |
| 14 */ | |
| 15 | |
| 16 .peertube-4x3 { | |
| 17 padding-bottom: 75%; /* inverse of 4:3 aspect ratio */ | |
| 18 } | |
| 19 .peertube-16x9 { | |
| 20 padding-bottom: 56.25%; /* inverse of 16:9 aspect ratio */ | |
| 21 } | |
| 22 .peertube-4x3, | |
| 23 .peertube-16x9 { | |
| 24 position: relative; | |
| 25 height: 0; | |
| 26 overflow: hidden; | |
| 27 } | |
| 28 .peertube-4x3 iframe, | |
| 29 .peertube-16x9 iframe { | |
| 30 position: absolute; | |
| 31 top: 0; | |
| 32 left: 0; | |
| 33 width: 100%; | |
| 34 height: 100%; | |
| 35 margin: 0; | |
| 36 border: 0; | |
| 37 } |
