Skip to content

Commit 520f537

Browse files
authored
Add responsive Twitch player iframe
1 parent 865c62a commit 520f537

1 file changed

Lines changed: 7 additions & 55 deletions

File tree

index.md

Lines changed: 7 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,7 @@
1-
<!doctype html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width,initial-scale=1" />
6-
<title>Bald.Stream — vargskelethor (iframe)</title>
7-
<style>
8-
:root{--bg:#071021;--muted:#9aa4b2}
9-
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#071021,#0f1724);color:#eef2f7}
10-
.wrap{max-width:1200px;margin:28px auto;padding:18px}
11-
.layout{display:grid;grid-template-columns:1fr 360px;gap:14px;align-items:start}
12-
.panel{background:#000;border-radius:8px;overflow:hidden;height:calc(100vh - 160px);min-height:320px}
13-
iframe{width:100%;height:100%;border:0;display:block}
14-
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
15-
.note{color:var(--muted);font-size:0.9rem}
16-
@media (max-width:900px){.layout{grid-template-columns:1fr}.panel{height:360px}}
17-
</style>
18-
</head>
19-
<body>
20-
<div class="wrap">
21-
<header>
22-
<h1 style="margin:0;font-size:1.05rem">Bald.Stream — vargskelethor</h1>
23-
<div class="note">Player (left) · Chat (right)</div>
24-
</header>
25-
26-
<main class="layout" role="main" aria-label="Twitch player and chat">
27-
<div class="panel" aria-label="Twitch player">
28-
<!-- Twitch player iframe using channel "vargskelethor" and parent "bald.stream" -->
29-
<iframe
30-
id="twitch-player"
31-
title="Twitch player for vargskelethor"
32-
src="https://player.twitch.tv/?channel=vargskelethor&parent=bald.stream&autoplay=false&muted=false"
33-
allow="autoplay; fullscreen; clipboard-write; encrypted-media; picture-in-picture"
34-
sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox">
35-
</iframe>
36-
</div>
37-
38-
<div class="panel" aria-label="Twitch chat">
39-
<!-- Twitch chat iframe (embed) -->
40-
<iframe
41-
id="twitch-chat"
42-
title="Twitch chat for vargskelethor"
43-
src="https://www.twitch.tv/embed/vargskelethor/chat?parent=bald.stream&darkpopout=true"
44-
allow="clipboard-write"
45-
sandbox="allow-same-origin allow-scripts allow-forms">
46-
</iframe>
47-
</div>
48-
</main>
49-
50-
<p class="note" style="margin-top:12px">
51-
Note: The "parent" parameter must match the exact host serving this page (bald.stream). Serve this file from that hostname for the embeds to work.
52-
</p>
53-
</div>
54-
</body>
55-
</html>
1+
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
2+
<iframe src="https://player.twitch.tv/?channel=vargskelethor&autoplay=false&parent=bald.stream&parent=chowder908.github.io/baldstream.github.io"
3+
style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;"
4+
allowfullscreen scrolling="no"
5+
allow="encrypted-media *;">
6+
</iframe>
7+
</div>

0 commit comments

Comments
 (0)