vscode-reveal
vscode-reveal copied to clipboard
evilz
feature request: add htmlFragment option
I want to add a background video to the whole deck.
I can do it with html, but not with markdown. It would be great if we can add an option to point to a html fragment in the yaml section, and inject that fragment into the resulting html.
e.g.:
slides.md
---
htmlFragment: fragment.html
customStyle: my-style.css
---
the slides...
fragment.html
<video id="background-video" src="..."/>
my-style.css
#background-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Actually video does not work but gif can be used like this :
.reveal .backgrounds:before{
background-image: url('https://i.giphy.com/90F8aUepslB84.gif');
/* background-image: url('https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4'); */
background-size: cover;
display: inline-block;
width: 100%;
height: 100%;
content:"";
}
Thanks!
yes, gif will work, but there are some limit to the quality.
also, having the ability to inject additional html will enable a lot more possibilities, such as adding multiple elements to the slides, and even doing some javascript to add some custom functionality to the slides.
The resulting html should look something like this:
<html>
<body>
<div> <!-- slides -->
<sections> ... </sections>
</div>
<div> <!-- fragment -->
<video id="background-video" ... />
<!-- can add more things here, including script tags -->
</div>
</body>
</html>
In the CSS we can use #background-video to control the layout.
I try to contribute. Looking at the code, my guess this is the code: https://github.com/evilz/vscode-reveal/blob/master/src/RevealServer.ts#L116-L117
But I'm not familiar with koa so I don't know what change is needed