1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
content / test / data / media / fullscreen.html [blame]
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Video Detection Test</title>
<meta name=viewport content="width=device-width initial-scale=1.0">
<style>
.big {
/* More than the threshold for "effectively fullscreen" detection. */
width: 99vw;
height: 99vh;
}
.small {
/* Less than the threshold for "effectively fullscreen" detection. */
width: 70vw;
height: 70vh;
}
.portrait {
width: 18vw;
height: 99vh;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="big_div" class="big">
<video controls id="big_video" class="big" src="bear.webm"></video>
</div>
<div id="small_div" class="small">
<video controls id="small_video" class="small" src="bear.webm"></video>
</div>
</body>
<script>
function makeFullscreen(id) {
if (!document.fullscreenElement) {
document.getElementById(id).requestFullscreen();
}
}
function exitFullscreen() {
document.exitFullscreen();
}
function makeBig(id) {
document.getElementById(id).className = "big";
}
function makeSmall(id) {
document.getElementById(id).className = "small";
}
function makePortrait(id) {
document.getElementById(id).className = "portrait";
}
function hide(id) {
document.getElementById(id).className = "hide";
}
function detach(id) {
let e = document.getElementById(id);
e.parentNode.removeChild(e);
window._detached_element = e;
}
function attach_to(id) {
let parent = document.getElementById(id);
parent.appendChild(window._detached_element);
}
</script>
</html>