After some more searching I understand a bit more about the CSS snippets and discovered this amazing post:
And then the repository with all the snippets.
From there I discovered the short snippet to both scale the image and then zoom to a certain size when hovering, and I was happy to discover that this also work for videos as well!
/* From BLUE TOPAZ /
/ Images : reduce displayed size of embedded files, zoom on hover */
.markdown-preview-view img, .markdown-preview-view video {
width: auto;
height: auto;
object-fit: contain;
max-height: 300px;
max-width: 550px;
outline: 0px solid var(–text-accent);
}
.markdown-preview-view img:hover , .markdown-preview-view video:hover {
width: 100%;
height:100%;
max-width: min(100%, 80vw);
max-height: min(100%, 80vh);
outline: none;
cursor: zoom-in;
}
I had less luck when trying out this script by @Lithou
Basically nothing happened. I read somewhere that div doesn’t work anymore so I replaced it with span, but that didn’t work for me either.
Basically Obsidian just shows the image without applying the modifiers in the css snippet.
EDIT:
I did get something to happen with the the portrait example when I changed from div to span, but it seems only size and the clip path work. I am not getting anything from the other examples unfortunately.
Would love to get this working.