I’ve been using my Daily notes as a journal and I’m exporting my daily entries to PDF. I have several videos that I have embedded. Showing a blank video player in a PDF export isn’t the best experience so I wanted a way to hide the video player and display text saying that it was an embedded video with the file name displayed. The results have been working well for my intended purpose. Here are screenshots of
- Obsidian in reading view
- Standard PDF export of embedded video
- Custom styling of embedded video in the PDF
Obsidian in reading view…
Standard PDF export of embedded video…
Custom styling of embedded video in the PDF…
The custom CSS to hide the blank video player and show a file reference block instead:
/* For screen view (normal) */
@media screen {
span.video-embed::after {
content: "";
display: none;
}
}
/* For print view */
@media print {
span.video-embed {
display: block;
width: 100%;
background-color: #f5f5f5; /* light gray background */
border: 1px solid #ccc; /* border */
padding: 15px 10px;
text-align: center;
position: relative;
height: 60px; /* Adjust this to fit your preferred height for the placeholder */
}
span.video-embed::after {
content: "[Embedded Video: " attr(alt) "]";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
span.video-embed > video {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}