-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTML and CSS
102 lines (94 loc) · 3.34 KB
/
HTML and CSS
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<title>Vimeo Event Wall</title>
<style>
body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
padding: 10px;
box-sizing: border-box;
}
.video-container {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
<script src="https://player.vimeo.com/api/player.js"></script>
</head>
<body>
<div class="video-container" id="player-0"></div>
<div class="video-container" id="player-1"></div>
<div class="video-container" id="player-2"></div>
<div class="video-container" id="player-3"></div>
<div class="video-container" id="player-4"></div>
<div class="video-container" id="player-5"></div>
<div class="video-container" id="player-6"></div>
<div class="video-container" id="player-7"></div>
<div class="video-container"></div>
<script>
const videoIds = [
'{ID_0}',
'{ID_1}',
'{ID_2}',
'{ID_3}',
'{ID_4}',
'{ID_5}',
'{ID_6}',
'{ID_7}'
];
videoIds.forEach((id, index) => {
const container = document.getElementById(`player-${index}`);
const iframe = document.createElement('iframe');
iframe.src = `https://vimeo.com/event/${id}/embed?autoplay=1`;
iframe.frameBorder = '0';
iframe.allow = 'autoplay; fullscreen; picture-in-picture';
iframe.allowFullscreen = true;
container.appendChild(iframe);
// Initialize the Vimeo player with the iframe
const player = new Vimeo.Player(iframe);
// Function to set the desired quality
function setQuality(quality) {
player.setQuality(quality).then(function(quality) {
console.log(`Player ${index} quality set to:`, quality);
}).catch(function(error) {
switch (error.name) {
case 'TypeError':
console.error(`Player ${index}: The quality selected is not valid.`);
break;
default:
console.error(`Player ${index}: An error occurred:`, error);
break;
}
});
}
// Wait for the player to be ready before setting the quality
player.ready().then(function() {
// Attempt to set the quality to '720p'
setQuality('720p');
});
// Optional: Listen to events and retry setting quality if needed
player.on('play', function() {
setQuality('720p');
});
player.on('qualitychange', function(event) {
console.log(`Player ${index} quality changed to:`, event.quality);
});
});
</script>
</body>
</html>