| 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> |
| 13 |
|
| 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"> |
| 23 |
|
| 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; |
| 32 |
} |
| 33 |
</textarea> |
| 34 |
|
| 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> |
| 43 |
|
| 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 --> |
| 53 |
|
