You might look into absolute positioning. You’ll probably want to adjust to your own preferences, but this looked all right to me at most sizes (until I made my window narrow enough that the menubar started to wrap onto a second line):
.floatlyrics code {
position: absolute;
top: 11.9em;
right: 5em;
width: 42%;
max-height: calc(100% - 19.8em);
overflow-y: scroll;
scrollbar-width: none;
}
For a slightly less hacky solution, you could make a new ViewTemplate that gets applied to all tiddlers with a title ending in .mp4, for instance, or perhaps a _canonical_uri
field ending in .mp4 (or other video file formats of your choice). That would give you more fine-grained control over how the video and the lyrics template are displayed, and you could use the View Template Body cascade to apply it preferentially over the default template.
Also—just so you know—“mode” is not a CSS property. I imagine you were thinking of display: inline-block;
.