con chat en una columna

_config.yml

@@ -3,6 +3,7 @@ lang: es
 markdown: kramdown
 streaming:
   url: https://trans.kefir.red
+  chat: https://ssh.kefir.red
   stream: miaudev
   formats:
     - webm

assets/main.css

 ---
 ---
 
-/**************************************************/
-/******************* RESETEADOR *******************/
-/**************************************************/
-
-/* http://meyerweb.com/eric/tools/css/reset/ v2.0 */
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-/* Old browsers / Para viejos exploradores */
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-
-body {
-  line-height: 1.5;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-blockquote, q {
-  quotes: none;
-}
-
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/**************************************************/
+{% node_module chota/dist/chota.min.css %}
 
 html, body {
-  margin: 0;
-  padding: 0;
-  background: black;
+  background-color: black;
 }
 
-/* Ver el video en pantalla completa */
-.full {
-  min-width: 100%;
-  min-height: 100%;
-}
-
-.full video {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: auto;
-  max-height: 100%;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
-  z-index: 0;
-}

index.html

@@ -2,12 +2,17 @@
 layout: default
 ---
 
-<div class="full">
-  <video controls autoplay="false" poster="assets/cover.jpg">
-    {% for format in site.streaming.formats %}
-    <source src="{{ site.streaming.url }}/{{ site.streaming.stream }}.{{ format }}"
-            id="{{ format }}"
-            type="video/{{ format }}"/>
-    {% endfor %}
-  </video>
+<div class="row is-paddingless">
+  <div class="col-8 is-paddingless is-marginless">
+    <video class="is-full-screen is-vertical-align" controls autoplay="false" poster="assets/cover.jpg">
+      {% for format in site.streaming.formats %}
+      <source src="{{ site.streaming.url }}/{{ site.streaming.stream }}.{{ format }}"
+              id="{{ format }}"
+              type="video/{{ format }}"/>
+      {% endfor %}
+    </video>
+  </div>
+  <div class="col is-paddingless is-marginless">
+    <iframe class="is-full-screen" src="{{ site.streaming.chat }}"></iframe>
+  </div>
 </div>

package.json

 {
   "dependencies": {
+    "chota": "^0.5.1",
     "zepto": "^1.2.0"
   }
 }

yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+chota@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/chota/-/chota-0.5.1.tgz#705f163d90543673e53787a37df663f1bbc6d4ef"
+
 zepto@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zepto/-/zepto-1.2.0.tgz#e127bd9e66fd846be5eab48c1394882f7c0e4f98"