Introduction
In this article and video, you will learn how to display videos at 100% of screen width in Obsidian. It has always been frustrating to me that the embed code displays them so small. You can edit the code and change the dimensions of course, but this creates two problems. First of all, editing code is time wasting when there are easier ways. Secondly, if you set the display size too large, it may not fit in your viewport.
Now, I love to embed videos in my Obsidian notes. I watch many videos on YouTube relating to research that I do and also for notes that I write. The videos will often support the notes, or I will make notes about different time stamps in the video. So the size of the default display has been frustrating me for a while. Finally, I decided to do something about it so I can see the videos at 100% width of my Obsidian notes.
Examples
Youtube video directly embedded
The example below is of a YouTube video embedded in an Obsidian note by copying and pasting the embed code from YouTube. As you can see, it takes up less than half the width of the note.
<iframe width="560" height="315" src="https://www.youtube.com/embed/iJ0-u4KlGyQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>Figure 1: Direct paste of embed code shows video like this.
Source: Screenshot from Obsidian by author.
Youtube video with CSS Snippet
Let us now apply a bit of CSS and HTML magic and see what happens. Note that the embed code is exactly the same as the above example. No changes are made to the code supplied by YouTube.
At this stage, this is just an example of the end result, so don’t worry too much about the code here. That will be explained in greater detail below.
Figure 2. The code that appears in your note when the video-container template is invoked
<div class="video-container">
<insert embed iframe code>
</div>
OR
<div class="video-container-vimeo">
<insert embed iframe code>
</div>Source: video-container-template.md developed by author
When we call the template, the above will appear in the note. We will delete from the line below the top closing div and remove the OR and the code related to Vimeo. Now we edit the code as follows:
Figure 3: The revised embed YouTube code wrapped inside the template
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/iJ0-u4KlGyQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>Source: Screenshot by author
This will result in the video displaying as below:
Figure 4: The video now embedded at 100% of screen width.
Quite some difference as you can see as it is taking up 100% of the available width in my Obsidian note.
The Code
Below is the code for the CSS file which also includes instructions for your Obsidian template note. You can either copy the code below, or follow this link to download the files.
/* CSS and template code to embed videos in Obsidian notes at 100% width and responsive across devices. Name this file videoContainer.css and place it in the snippets directory under .obsidian. See bottom of page for template code. */
/* CSS for videos from Youtube */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Sets 16:9 aspect ratio */
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* CSS for videos from Vimeo */
.video-container-vimeo {
padding-bottom: 56.25%; /* Sets 16:9 aspect ratio */
}
.video-container-vimeo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Code for Obsidian template. Name the file videoContainer Template and store in same folder as all your Obsidian templates. Use a hotkey for template insertion. (I use Alt + T). Obtain the embed code from the Youtube or Vimeo video. Paste this where it says "insert embed iframe code" overwriting that code. Delete the unused Youtube or Vimeo code. */
<div class="video-container">
<insert embed iframe code>
</div>
OR
<div class="video-container-vimeo">
<insert embed iframe code>
</div>Padding value calculations
The padding value in the css for the bottom sets up the dimensions for the video’s display ratio. The value of 56.25% sets it to 16:9 which most videos use. However, there may be some around that use a 4:3 ratio, so you will need to change the 56.25% value. To achieve this, you will need to duplicate the css and template files to cater for the changes. All the code will remain the same, except you will need to change the names of the classes to avoid conflict. For example, you could change .video-container to .video-container-43 so it is meaningful.
The value calculation is to divide the height of the video by the width of the video and multiply by 100%. So, for a 4:3 video, the calculation would be 600/800 = .75 and then multiply by 100% = 75% . This then becomes your bottom-padding value.
Conclusion
This has been one of those little things that had been bugging me about my notes. As I said, I embed a lot of videos when note making and doing research. This small adjustment has been great, so I can watch videos at a reasonable size right from within my Obsidian vault.
