website/index.html at master · kvcmlive/website · GitHub

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
---
title: "Home"
layout: default
---

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

<style>
.twitch .twitch-video {
  padding-top: 56.25%;
  position: relative;
  height: 0;
}

.twitch .twitch-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.twitch .twitch-chat {
  height: 400px;
}

.twitch .twitch-chat iframe {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 850px) {
  .twitch {
    position: relative;
  }

  .twitch .twitch-video {
    width: 75%;
    padding-top: 42.1875%;
  }

  .twitch .twitch-chat {
    width: 25%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

.popout {
  padding: 20px;
}
</style>

<div class="twitch">
  <div class="twitch-video" id="video">
  </div>
  <div class="twitch-chat" id="chat">
    <iframe frameborder="0"
        scrolling="no"
        id="chat_embed"
        src="https://www.twitch.tv/embed/monarchradio/chat?parent=kvcm.live"
        height="100%"
        width="100%">
    </iframe>

  </div>
</div>

<script type="text/javascript">
  var options = {
    width: "100%",
    height: "100%",
    channel: "monarchradio",
    parent: ["github.io", "kvcm.live"]
  };
  var player = new Twitch.Player("video", options);
  //player.setVolume(0.5);
</script>

<div class="popout">
  <a href="https://player.twitch.tv/?channel=monarchradio&enableExtensions=true&muted=false&parent=twitch.tv&player=popout&volume=1" onclick="window.open('https://player.twitch.tv/?channel=monarchradio&enableExtensions=true&muted=false&parent=twitch.tv&player=popout&volume=1','popup','width=600,height=600,scrollbars=no,resizable=no'); player.pause(); return false;" class="btn btn--primary">Pop-out player</a>
  <a href="https://beta.kvcm.live" class="btn btn--primary">Try our new website!</a>
</div>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';

  const el = document.createElement('pwa-update');
  document.body.appendChild(el);
</script>