From 9b4c07d3bad3e2ae4dfe6d3e338bd1c51259a285 Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sat, 22 Aug 2020 00:09:01 -0700
Subject: [PATCH] stylin'

---
 webroot/js/utils/chat.js  |  6 +++---
 webroot/styles/chat.css   | 18 ++++++++++++------
 webroot/styles/layout.css | 10 +++++-----
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/webroot/js/utils/chat.js b/webroot/js/utils/chat.js
index 067af1c50..4ce504f43 100644
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@@ -115,13 +115,13 @@ function getYoutubeIdFromURL(url) {
 }
 
 function getYoutubeEmbedFromID(id) {
-	return `<iframe class="chat-embed" src="//www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe>`;
+	return `<iframe class="chat-embed youtube-embed" src="//www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe>`;
 }
 
 function getInstagramEmbedFromURL(url) {
 	const urlObject = new URL(url.replace(/\/$/, ""));
 	urlObject.pathname += "/embed";
-	return `<iframe class="chat-embed instagram-embed" height="150px" src="${urlObject.href}" frameborder="0" allowfullscreen></iframe>`;
+	return `<iframe class="chat-embed instagram-embed" src="${urlObject.href}" frameborder="0" allowfullscreen></iframe>`;
 }
 
 function isImage(url) {
@@ -130,7 +130,7 @@ function isImage(url) {
 }
 
 function getImageForURL(url) {
-	return `<a target="_blank" href="${url}"><img class="embedded-image" src="${url}" width="100%" height="150px"/></a>`;
+	return `<a target="_blank" href="${url}"><img class="chat-embed embedded-image" src="${url}" /></a>`;
 }
 
 // Taken from https://stackoverflow.com/questions/3972014/get-contenteditable-caret-index-position
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index f308a29b4..85b7eaaa4 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -167,21 +167,27 @@
   padding: .25rem;
 }
 
-.message-text iframe {
+
+
+.message-text .chat-embed {
   width: 100%;
-  height: 12rem;
-  border-radius: 1rem;
+  border-radius: .25rem;
 }
 
 .message-text .instagram-embed {
-  height: 22em;
+  height: 24rem;
 }
 
+
 .message-text .embedded-image {
   width: 100%;
   display: block;
-  height: 15rem;
-  border-radius: 1rem;
+  /* height: 15rem; */
+}
+
+.message-text .youtube-embed {
+  width: 100%;
+  height: 12rem;
 }
 
 .message-text .highlighted {
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 56474415c..aaa50fe29 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -215,20 +215,20 @@ h2 {
 
 #video-container {
   height: calc(var(--video-container-height));
-  width: 100%;
+  /* width: 100%; */
   margin-top: var(--header-height);
-  background-position: center center;
-  background-repeat: no-repeat;
+  /* background-position: center center;
+  background-repeat: no-repeat; */
 
   background-size: 30%;
 }
 
 .owncast-video-container {
   height: auto;
-  display: flex;
+  /* display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: center;
+  align-items: center; */
 }
 .owncast-video-container .video-js {
   width: 100%;