Ric Raftis consulting logo

Ric Raftis Consulting

100% Width Video Embedding In Obsidian – How To Do It!

Ric Raftis consulting logo

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.

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

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

Source: Screenshot by author

This will result in the video displaying as below:

Quite some difference as you can see as it is taking up 100% of the available width in my Obsidian note. The video is also responsive to the window width.

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.

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.

Bonus Video

Facebook
Twitter
LinkedIn

Leave a Comment

Your email address will not be published. Required fields are marked *