| @@ -1,52 +1,27 @@ | ||
| 1 | -<!DOCTYPE html> | |
| 2 | -<html lang="en-us"> | |
| 3 | - <head> | |
| 4 | - <meta charset="utf-8" /> | |
| 5 | - <meta name="viewport" content="width=device-width" /> | |
| 6 | - <title>MDN Web Docs Example: Toggling full-screen mode</title> | |
| 7 | - <link rel="stylesheet" href="styles.css"> | |
| 8 | - <style class="editable"> | |
| 9 | - video::backdrop { | |
| 10 | - background-color: #448; | |
| 11 | - } | |
| 12 | - </style> | |
| 1 | +<style> | |
| 2 | +.Aligner { | |
| 3 | + display: flex; | |
| 4 | + align-items: center; | |
| 5 | + justify-content: center; | |
| 6 | +} | |
| 13 | 7 | |
| 14 | - <!-- import the webpage's javascript file --> | |
| 15 | - <script src="script.js" defer></script> | |
| 16 | - </head> | |
| 17 | - <body> | |
| 18 | - <section class="preview"> | |
| 19 | - <video controls | |
| 20 | - src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" | |
| 21 | - poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" | |
| 22 | - width="620"> | |
| 8 | +.Aligner-item { | |
| 9 | + max-width: 50%; | |
| 10 | +} | |
| 23 | 11 | |
| 24 | - Sorry, your browser doesn't support embedded videos. Time to upgrade! | |
| 12 | +.Aligner-item--top { | |
| 13 | + align-self: flex-start; | |
| 14 | +} | |
| 25 | 15 | |
| 26 | - </video> | |
| 27 | - </section> | |
| 28 | - | |
| 29 | -<textarea class="playable playable-css" style="height: 100px;"> | |
| 30 | -video::backdrop { | |
| 31 | - background-color: #448; | |
| 16 | +.Aligner-item--bottom { | |
| 17 | + align-self: flex-end; | |
| 32 | 18 | } |
| 33 | -</textarea> | |
| 19 | +</style> | |
| 34 | 20 | |
| 35 | -<textarea class="playable playable-html" style="height: 200px;"> | |
| 36 | -<video controls | |
| 37 | - src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" | |
| 38 | - poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" | |
| 39 | - width="620"> | |
| 40 | -Sorry, your browser doesn't support embedded videos. Time to upgrade! | |
| 41 | -</video> | |
| 42 | -</textarea> | |
| 21 | +<div class="Aligner"> | |
| 22 | + <div class="Aligner-item Aligner-item--top">…</div> | |
| 23 | + <div class="Aligner-item">…</div> | |
| 24 | + <div class="Aligner-item Aligner-item--bottom">…</div> | |
| 25 | +</div> | |
| 43 | 26 | |
| 44 | - <div class="playable-buttons"> | |
| 45 | - <input id="reset" type="button" value="Reset" /> | |
| 46 | - </div> | |
| 47 | - </body> | |
| 48 | - <script src="playable.js"></script> | |
| 49 | - </body> | |
| 50 | -</html> | |
| 51 | - | |
| 52 | -<!-- From https://github.com/mdn/css-examples/blob/main/backdrop/index.html --> | |
| 27 | +<!-- From https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ --> | |
