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