| @@ -1,27 +1,52 @@ | ||
| 1 | -<style> | |
| 2 | -.Aligner { | |
| 3 | - display: flex; | |
| 4 | - align-items: center; | |
| 5 | - justify-content: center; | |
| 6 | -} | |
| 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> | |
| 7 | 13 | |
| 8 | -.Aligner-item { | |
| 9 | - max-width: 50%; | |
| 10 | -} | |
| 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"> | |
| 11 | 23 | |
| 12 | -.Aligner-item--top { | |
| 13 | - align-self: flex-start; | |
| 24 | + Sorry, your browser doesn't support embedded videos. Time to upgrade! | |
| 25 | + | |
| 26 | + </video> | |
| 27 | + </section> | |
| 28 | + | |
| 29 | +<textarea class="playable playable-css" style="height: 100px;"> | |
| 30 | +video::backdrop { | |
| 31 | + background-color: #448; | |
| 14 | 32 | } |
| 33 | +</textarea> | |
| 15 | 34 | |
| 16 | -.Aligner-item--bottom { | |
| 17 | - align-self: flex-end; | |
| 18 | -} | |
| 19 | -</style> | |
| 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> | |
| 20 | 43 | |
| 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> | |
| 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> | |
| 26 | 51 | |
| 27 | -<!-- From https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ --> | |
| 52 | +<!-- From https://github.com/mdn/css-examples/blob/main/backdrop/index.html --> | |
