mirror of
https://github.com/gnoxnahte/obsidian-auto-embed.git
synced 2026-07-22 09:50:24 +00:00
d0ff3c66d8
- Add common iframe attributes in embedBase, avoiding duplicate code - Partially fix reddit resizing bug by lazy loading it. Still occurs when there are multiple reddit embeds in the user's view - support more imgur urls - remove min-height from css to allow user-set heights
114 lines
No EOL
2.4 KiB
CSS
114 lines
No EOL
2.4 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. */
|
|
img[src^="https:"][contenteditable=false]:not(.ignore-auto-embed),
|
|
img[src^="http:"][contenteditable=false]:not(.ignore-auto-embed) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* iframe[src^="https://platform.twitter.com/embed"].external-embed,
|
|
iframe[src^="https://www.youtube.com/embed"].external-embed
|
|
{
|
|
display: none !important;
|
|
} */
|
|
|
|
/* TODO: Somehow find a way to remove widget buffer. It makes a weird spacing between the embeds */
|
|
.cm-widgetBuffer:has(+ iframe.auto-embed) {
|
|
display: none !important;
|
|
}
|
|
|
|
iframe.auto-embed {
|
|
max-width: 100%;
|
|
/* min-height: 500px; */
|
|
|
|
display: block;
|
|
}
|
|
|
|
iframe.small.auto-embed {
|
|
height: 300px;
|
|
}
|
|
|
|
iframe.large.auto-embed {
|
|
height: 1000px;
|
|
}
|
|
|
|
iframe.largest.auto-embed {
|
|
height: calc(100vh - 100px);
|
|
}
|
|
|
|
.auto-embed.twitter-embed {
|
|
width: 600px;
|
|
height: 350px;
|
|
min-height: unset;
|
|
}
|
|
|
|
.auto-embed.youtube-shorts-embed {
|
|
height: 560px;
|
|
aspect-ratio: 9/16;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.auto-embed.error-embed {
|
|
border: 3px solid #555;
|
|
border-radius: 15px;
|
|
padding: 10px;
|
|
color: var(--text-error);
|
|
margin: 0;
|
|
}
|
|
|
|
.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.*/
|
|
}
|
|
|
|
.auto-embed.reddit-embed {
|
|
height: 240px;
|
|
width: 100%;
|
|
/* height: 500px; */
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.auto-embed.codepen-embed {
|
|
width: 100%;
|
|
height: 300px;
|
|
/* min-height: 300px; */
|
|
} |