mirror of
https://github.com/gnoxnahte/obsidian-auto-embed.git
synced 2026-07-22 09:50:24 +00:00
04a21a21b3
Minor bugs & additions: - When the user is on the line to edit the embed and presses down, it'll go straight to the next line instead of the side of the embed. (Changed display to inline). However, if the user presses right when they are on the last character of the line, it'll still go to the side of the embed (still not fixed) - Add Imgur album support
170 lines
No EOL
3.9 KiB
CSS
170 lines
No EOL
3.9 KiB
CSS
/* If this doesn't work, try this. Found when selecting
|
|
.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false]
|
|
*/
|
|
|
|
/* Select the placeholder image and alt that appears when Obsidian doesn't render the link. Has 2 duplicates to support "http" and "https"*/
|
|
/* Normal / default when pasting without any other content */
|
|
img[src^="https:"][contenteditable=false]:has(+ div .auto-embed),
|
|
img[src^="http:"][contenteditable=false]:has(+ div .auto-embed),
|
|
/* When editing in a list */
|
|
img[src^="https:"][contenteditable=false]:has(+ .auto-embed),
|
|
img[src^="http:"][contenteditable=false]:has(+ .auto-embed),
|
|
/* When in a list (not editing) */
|
|
img[src^="https:"][contenteditable=false]:has(+ img.cm-widgetBuffer + img.cm-widgetBuffer + .auto-embed),
|
|
img[src^="http:"][contenteditable=false]:has(+ img.cm-widgetBuffer + img.cm-widgetBuffer + .auto-embed)
|
|
{
|
|
display: none !important;
|
|
/*
|
|
+ img.cm-widgetBuffer {
|
|
display: none !important;
|
|
|
|
+ img.cmd-widgetBuffer {
|
|
display: none !important;
|
|
|
|
+ iframe.auto-embed + .img.cmd-widgetBuffer {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
+ img.cm-widgetBuffer + img.cm-widgetBuffer {
|
|
display: none !important;
|
|
}
|
|
|
|
+ img.cm-widgetBuffer + img.cm-widgetBuffer + iframe.auto-embed + .img.cmd-widgetBuffer {
|
|
display: none !important;
|
|
} */
|
|
}
|
|
|
|
/* Removes obsidian's embeds */
|
|
/* iframe[src^="https://platform.twitter.com/embed"].external-embed,
|
|
iframe[src^="https://www.youtube.com/embed"].external-embed
|
|
{
|
|
display: none !important;
|
|
} */
|
|
|
|
iframe.auto-embed {
|
|
max-width: 100%;
|
|
/* min-height: 500px; */
|
|
|
|
display: inline;
|
|
}
|
|
|
|
/* Default fallback */
|
|
.auto-embed iframe.default-fallback-embed {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Twitter */
|
|
.auto-embed.twitter-embed {
|
|
width: 600px;
|
|
height: 350px;
|
|
min-height: unset;
|
|
}
|
|
|
|
/* YouTube Shorts */
|
|
.auto-embed.youtube-shorts-embed {
|
|
height: 560px;
|
|
aspect-ratio: 9/16;
|
|
}
|
|
|
|
/* YouTube */
|
|
.auto-embed.youtube-embed {
|
|
/* Default size of YouTube videos when using Share > Embed option on YoutTube's website */
|
|
/* width: 560px;
|
|
height: 315px; */
|
|
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
/* Error */
|
|
.auto-embed.error-embed {
|
|
border: 3px solid #555;
|
|
border-radius: 15px;
|
|
padding: 10px;
|
|
color: var(--text-error);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Steam */
|
|
.auto-embed.steam-embed {
|
|
/* Default size of Steam previews when using Embed option on Steam's website */
|
|
/* width: 646px;
|
|
height: 190px; */
|
|
|
|
width: 100%;
|
|
height: 190px;
|
|
|
|
/* Even if height is set to very big and width is small, it doesn't change the height,
|
|
and height stays at 190px. So set a fixed height.*/
|
|
}
|
|
|
|
/* Reddit */
|
|
.auto-embed.reddit-embed {
|
|
height: 240px;
|
|
width: 100%;
|
|
/* height: 500px; */
|
|
}
|
|
|
|
/* Spotify */
|
|
.auto-embed.spotify-embed-container {
|
|
left: 0;
|
|
width: 100%;
|
|
height: 80px;
|
|
position: relative;
|
|
}
|
|
|
|
.auto-embed.spotify-embed-container.spotify-song-large,
|
|
.auto-embed.spotify-embed-container.spotify-playlist-small {
|
|
height: 152px;
|
|
}
|
|
|
|
.auto-embed.spotify-playlist-embed {
|
|
height: 369px;
|
|
}
|
|
|
|
.auto-embed.spotify-embed {
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
/* CodePen */
|
|
.auto-embed.codepen-embed {
|
|
width: 100%;
|
|
height: 300px;
|
|
/* min-height: 300px; */
|
|
}
|
|
|
|
/* Google Docs */
|
|
.auto-embed.google-docs-embed-edit-default {
|
|
height: 76.5rem;
|
|
width: 100%;
|
|
}
|
|
.auto-embed.google-docs-embed-preview {
|
|
width: 100%;
|
|
aspect-ratio: 4/5;
|
|
}
|
|
.auto-embed.google-docs-embed-edit-minimal {
|
|
width: 100%;
|
|
height: 70rem;
|
|
}
|
|
|
|
/* TikTok */
|
|
.auto-embed.tiktok-embed {
|
|
max-width: 605px;
|
|
min-width: 325px;
|
|
/* Default at 700px to prevent some Cumulative Layout Shift while waiting for tiktok to send the resize message */
|
|
height: 700px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
/* SoundCloud */
|
|
.auto-embed.soundcloud-embed {
|
|
width: 100%;
|
|
height: 166px;
|
|
} |