Skip to content

Commit 821e9ed

Browse files
rachelandrewrachelandrew
committed
make it interactive
1 parent d39a548 commit 821e9ed

File tree

3 files changed

+115
-14
lines changed

3 files changed

+115
-14
lines changed

‎backdrop/index.html

+32-14
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,47 @@
44
<title>MDN Web Docs Example: Toggling full-screen mode</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
8-
<!-- import the webpage's stylesheet -->
9-
<link rel="stylesheet" href="style.css">
7+
<link rel="stylesheet" href="styles.css">
8+
<style class="editable">
9+
video::backdrop {
10+
background-color: #448;
11+
}
12+
</style>
1013

1114
<!-- import the webpage's javascript file -->
1215
<script src="script.js" defer></script>
1316
</head>
1417
<body>
15-
<h1>Example: Toggling full-screen presentation of a video</h1>
16-
17-
<p>In this example, we see a video element showing a movie ("Big Buck Bunny").
18-
you can toggle full screen mode on and off by pressing the Return or Enter key.</p>
19-
20-
<!-- Simple video example -->
21-
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
22-
<!-- Poster from peach.blender.org -->
23-
<video controls
18+
<section class="preview">
19+
<video controls
2420
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
2521
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
2622
width="620">
2723

28-
Sorry, your browser doesn't support embedded videos. Time to upgrade!
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>
2943

30-
</video>
44+
<div class="playable-buttons">
45+
<input id="reset" type="button" value="Reset" />
46+
</div>
47+
</body>
48+
<script src="playable.js"></script>
3149
</body>
3250
</html>

‎backdrop/playable.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
var section = document.querySelector('section');
2+
var editable = document.querySelector('.editable');
3+
var textareaHTML = document.querySelector('.playable-html');
4+
var textareaCSS = document.querySelector('.playable-css');
5+
var reset = document.getElementById('reset');
6+
var htmlCode = textareaHTML.value;
7+
var cssCode = textareaCSS.value;
8+
9+
function fillCode() {
10+
editable.innerHTML = textareaCSS.value;
11+
section.innerHTML = textareaHTML.value;
12+
}
13+
14+
reset.addEventListener('click', function () {
15+
textareaHTML.value = htmlCode;
16+
textareaCSS.value = cssCode;
17+
fillCode();
18+
});
19+
20+
textareaHTML.addEventListener('input', fillCode);
21+
textareaCSS.addEventListener('input', fillCode);
22+
window.addEventListener('load', fillCode);

‎backdrop/styles.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Some default styling for cookbook examples */
2+
/*
3+
rgb(53,43,34)
4+
rgb(75,70,74)
5+
rgb(95,97,110)
6+
rgb(137,151,188)
7+
rgb(160,178,226)
8+
*/
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
17+
/* styles for the editor */
18+
19+
.playable {
20+
font-family: monospace;
21+
display: block;
22+
margin-bottom: 10px;
23+
background-color: #F4F7F8;
24+
border: none;
25+
border-left: 6px solid #558ABB;
26+
color: #4D4E53;
27+
width: 90%;
28+
max-width: 700px;
29+
padding: 10px 10px 0px;
30+
font-size: 90%;
31+
}
32+
33+
.playable-css {
34+
height: 80px;
35+
}
36+
37+
.playable-html {
38+
height: 160px;
39+
}
40+
41+
.playable-buttons {
42+
text-align: right;
43+
width: 90%;
44+
max-width: 700px;
45+
padding: 5px 10px 5px 26px;
46+
font-size: 100%;
47+
}
48+
49+
.preview {
50+
width: 90%;
51+
max-width: 700px;
52+
border: 1px solid #4D4E53;
53+
border-radius: 2px;
54+
padding: 10px 14px 10px 10px;
55+
margin-bottom: 10px;
56+
}
57+
58+
.preview input {
59+
display: block;
60+
margin: 5px;
61+
}

0 commit comments

Comments
 (0)