Fix: Improve defaults styles for embeds

sandypockets · Dec 16, 2023 · 0205292 · 0205292
1 parent 058e538
commit 0205292
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/dist/index.esm.js b/dist/index.esm.js
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/styles.css b/dist/styles.css
diff --git a/src/plugins/embed.js b/src/plugins/embed.js
@@ -53,7 +53,7 @@ export default function embed() {
             case 'youtube':
               const embedUrl = transformYouTubeUrl(url);
               node.type = 'raw';
-              node.value = `<iframe src="${embedUrl}" width="100%" height="100%" title="YouTube video player" frameborder="0" allowfullscreen></iframe>`;
+              node.value = `<iframe class="epic-remark-youtube" src="${embedUrl}" width="100%" title="YouTube video player" frameborder="0" allowfullscreen></iframe>`;
               break;
             case 'iframe':
               node.type = 'raw';

diff --git a/src/styles.css b/src/styles.css
@@ -187,8 +187,7 @@
   border-spacing: 0;
   background-color: #1a1a1a;
   border-radius: 0.5rem;
-  margin-top: 0.125rem;
-  margin-bottom: 0.125rem;
+  margin: 0.125rem;
 }
 
 .markdown table tbody {
@@ -253,6 +252,18 @@ ul.markdown.toc {
   font-size: 0.9rem;
 }
 
+div.epic-remark-gist {
+  height: 400px;
+}
+
+div.epic-remark-gist > iframe {
+  height: 100%;
+}
+
+iframe.epic-remark-youtube {
+  height: 400px;
+}
+
 @media (max-width: 768px) {
   .markdown table th,
   .markdown table td {