wiki/howto/tutorials/sailinganalytics/tracking-race-player.md
... ...
@@ -1,33 +1,40 @@
1 1
The video below gives an excellent overview of the main functionality of the SAP Race Player which is accessible on a per-race basis via the "Races/Tracking" Tab of a regatta.
2 2
3
-<div id="player"></div>
4
-
5
-<script>
6
- // Load YouTube IFrame API script
7
- var tag = document.createElement('script');
8
- tag.src = "https://www.youtube.com/iframe_api";
9
- var firstScriptTag = document.getElementsByTagName('script')[0];
10
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
11
-
12
- // Create YouTube player when API ready
13
- var player;
14
- function onYouTubeIframeAPIReady() {
15
- player = new YT.Player('player', {
16
- height: '360',
17
- width: '640',
18
- videoId: 'A2Z86lYV7CE',
19
- events: {
20
- 'onReady': onPlayerReady,
21
- }
22
- });
23
- }
24
-
25
- function onPlayerReady(event) {
26
- // Autoplay video
27
- event.target.playVideo();
28
- }
29
-</script>
30
-
31
-
32
-
33 3
4
+<head>
5
+
6
+ <meta charset="UTF-8" />
7
+ <title>YouTube IFrame API Example</title>
8
+</head>
9
+<body>
10
+
11
+ <div id="player"></div>
12
+
13
+ <script>
14
+ // 1. Load the IFrame Player API code asynchronously.
15
+ var tag = document.createElement('script');
16
+ tag.src = "https://www.youtube.com/iframe_api";
17
+ var firstScriptTag = document.getElementsByTagName('script')[0];
18
+ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
19
+
20
+ // 2. Create the YouTube player after the API code downloads.
21
+ var player;
22
+ function onYouTubeIframeAPIReady() {
23
+ player = new YT.Player('player', {
24
+ height: '360',
25
+ width: '640',
26
+ videoId: 'A2Z86lYV7CE', // Your YouTube video ID
27
+ events: {
28
+ 'onReady': onPlayerReady
29
+ }
30
+ });
31
+ }
32
+
33
+ // 3. Autoplay when ready
34
+ function onPlayerReady(event) {
35
+ event.target.playVideo();
36
+ }
37
+ </script>
38
+
39
+</body>
40
+</html>
... ...
\ No newline at end of file