49 lines
1.3 KiB
HTML
49 lines
1.3 KiB
HTML
{%- import 'util/macros.html' as macros with context -%}
|
|
{%- import 'html_head.html' as html_head with context -%}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{% if SITE == 'localhost' %}
|
|
{% set csp="script-src 'self' 'unsafe-inline' rdrama.net; connect-src 'self'; object-src 'none';" %}
|
|
{% else %}
|
|
{% set csp=none %}
|
|
{% endif %}
|
|
{{html_head.html_head(true, true, true, csp, "Chat", none, "", false)}}
|
|
<body>
|
|
{% include "header.html" %}
|
|
<div id="watchparty">
|
|
<iframe id="watchparty-video" src="https://www.youtube.com/embed/FREuW765_O4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
<iframe id="watchparty-chat" src="/chat?embed=true"></iframe>
|
|
</div>
|
|
<style>
|
|
html, body, #watchparty {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#watchparty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#watchparty-video {
|
|
width: 100%;
|
|
height: 50%;
|
|
max-width: 560px;
|
|
max-height: 315px;
|
|
margin: 0 auto;
|
|
flex-grow: 1;
|
|
}
|
|
#watchparty-chat {
|
|
width: 100%;
|
|
height: 50%;
|
|
flex-grow: 1;
|
|
}
|
|
@media screen and (min-width: 1000px) {
|
|
#watchparty {
|
|
flex-direction: row;
|
|
}
|
|
#watchparty-video, #watchparty-chat {
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|