stylin'

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

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 {

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%;