Embedding responsive YouTube videos (via snippet & template)

This is my current workflow for dealing with YouTube embeds in my Obsidian pages. It makes embedded videos responsive (so they resize to the width of page). By using a Template, all that’s required is to copy the YouTube video ID from the URL and paste it in once the template has been applied.

  1. Save this code as a CSS snippet:
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-bottom: 3%;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    }
  1. Save this code as a Template:
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/PASTE_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  1. Notice the “PASTE_ID” section in the embed code? Double click that and paste in the video ID of your YouTube video.

tada! :slight_smile:

7 Likes

So, this only works for YouTube videos, correct?

It can be made to work with other embedded videos, for example Vimeo:

<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/9873910" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
1 Like

Once the snippet is installed, all that’s happening is we are wrapping <div class="videoWrapper"> … </div> around the stock embed code, so it’s possible it could work for many platforms.

1 Like

@Neigh: OK, great, I had already copied the code and was about to paste it in Obs when it hit me that you only mentioned YT. Anyway, thanks for clearing that up.

No worries at all :slight_smile:

@Neigh: 1st of all thanks for the the code and template. I just embedded a video, and noticed that in Preview the bit after PASTE ID", i.e. starting from frameborder=“0” was visible as text, i.e. it was not part of the video embed code.

I deleted it, and the video still works, so to me it seems that bit from frameborder on is superfluous. Now, your expertise is waaaaay above my modest knowledge, so I cannot believe you would have added extraneous stuff, so please help me understand.

Okay so that embed code comes from the “share” -> “embed” dialog on a YouTube video. So that superfluous stuff is from YouTube and yes it can be purged if preferred. I like the way it looks borderless, and definitely want to be able to go fullscreen … so a simplified template could be more like this:

<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/PASTE_ID" frameborder="0" allowfullscreen></iframe></div>

@Neigh: OK, cool. Shall I copy this to the Github repository I keep for CSS snippets?

Sure thing :slight_smile: Maybe add a comment to the CSS instructing users to wrap their embed code in <div class="videoWrapper"> … </div> Otherwise the snippet will do nothing

@Neigh: thanks. Yes, I will do that, as I already did for my personal version.