CSS snippet to properly resize youtube videos?

[ironhak]

Hi everyone, I’m using Minimal Theme with “Normal line width” set to 60, where the default is 40. I’m experiencing a little caveat tough, I would like to have a proper size for embeded Youtube videos, they are like this:

As you see it’s not a good format, indeed if I play it this is the result:

I would like to mantain the same width but increase the height in order to have a better “square”. I’ve tried looking at the inspector tool and I only found a way to modify the size of embeded videos from the vault (so using default obsidian video-player).

Can someone help? Thank’s

[Jopp]

If you’re comfortable to try out a new theme, get Dune from Obsidians theme repo.
Get more info here, scroll to the very bottom of the page

If you want just the snippet and you’re not interested in a theme switch, then let me know, right now I have no access to my machine

[ironhak]

Hi, I saw the theme but honestly I spent so much time tweaking minimal theme to my personal needs that I do not think to switch theme anytime soon.

Let me know if you can help anyway, thanks

[Jopp]

I see, here’s the code:

[alt~="vid-20"] video {
  width: 20%;
}

[alt~="vid-30"] video {
  width: 30%;
}

[alt~="vid-40"] video {
  width: 40%;
}

Basically, you can repeat and add the same rule as many times as you like, the only thing you need to consider is the numerical value.

To make it work, copy paste and save the above code as video-sizes.css or whatever name you want and then, add to your videos the desired scale factor as metadata, like so:

![[video.mp4|vid-20]]

[ironhak]

Hello, thank’s but it’s not working.

Just to clarify, I’m referring to Youtube embed video, so:

![embed video|vid-40](https://www.youtube.com/watch?v=IdTMDprams8)

Is not working, any solutions?

[Jopp]

Hmmm I must admit my code is not recent and I don’t use this feature too much myself, but for me it works

I ran a test right now (Dune then sandbox vault - attachment is from the latter one) and everything loaded almost immediately, maybe your online connection wasn’t that good before?
On my side, I added a random Yt url, try this one
![embed vid | vid-40](https://www.youtube.com/watch?v=l-bPAXxiJ38)

Maybe it’s bc of the space added after the pipe symbol, idk

[Jopp]

Dang, i see what you meant. I’ll try to improve my code. It worked well not too long time ago, I’m sorry about.
Will check and eventually post my fixed code

Edit
I tried both on phone and desktop, resizing worked on desktop only, not on phone.
Anyway, it makes no sense to modify video size on phone, phone screens are too tiny for this feature. Additionally, you don’t use a phone but bigger screens.

So I come to the conclusion, Minimal causes this issue.
Maybe you’ve to uncheck some option there or Minimal needs some patch. Big themes are hard to debug.

Now, to help you out, let’s check:
what happens if you switch width with height in my snippet ?
Just an idea, no guarantee it’ll work. Also try to use 500px and 800px in stead of 40%.

Both measure units work, but i repeat, this issue is caused by the Minimal theme or some other snippets, if you’ve. Try my code in a sandbox vault, just to see the diff and how videos scale. I would wonder if my snippet wouldn’t work, because on my machine videos scale

Try these examples: (and make sure your metadata is vid-40)

[alt~="vid-40"] video {
  height: 40%;
}

[alt~="vid-40"] video {
  height: 500px;
}

[ironhak]

Hello, thank’s for reaching back. Regarding this working on phone, yes I agree.

Anyway, this is not working first of all for one reason, you can’t append metadata “|vid-40” on external link because itself [...](link)what’s inside the square brackets is the metadata, so you can’t insert a comment inside a comment… Don’t know if that makes sense.

Anyway, having it in form of metada is not necessarly, indeed I would like to have this applied to all youtube and other embded videos, a uniform player size for all videos if you will.

As I said I searched a lot on the inspector to find the right piece to target, but did not found anything.

Edit:
By the way I tried doing

video {
  height: 500px !important;
}

And it worked modifying the size of all videos but youtube ones . Basically if the links is like ![...](http ........ .mp4) (or really any video format) or [[embed local video.mp4]] then the snippet works, with youtube links it does not work

[Jopp]

You’re on the right track, indeed metadata isn’t needed but very useful if you want more control over callouts or videos. Your code is good, by the way.

The best advice i can give you now is to experiment in the sandbox vault, so you get results quickly, this will remove a lot of confusion. You can find the sandbox vault if you open help>open sandbox vault in your app menu bar generated by your system (not Obsidian)

I understand you need to implement code for use with Minimal, but for development purposes, snippet need to work as standalone code first, before you adapt them to themes

[ironhak]

Yes I know, as already said I tried to find the code snippet that manipulates specifically youtube embeds, but I can’t find it neither with minimal applied and without it

[ariehen]

I don’t know if this will work for you, but you could give it a try. I was using Minimal Theme Settings > Normal line width → 60 when checking. Choose either % or px values.

If Minimal Theme Settings > Maximize media is OFF:

iframe[src*="youtube"] {
    width: 80%;
    /* width: 650px */  
}

If Minimal Theme Settings > Maximize media is ON:

.full-width-media iframe.external-embed[src*="youtube"] {
    width: 80%;
    /* width: 650px */  
}

[ironhak]

This is the perfect size:

.full-width-media iframe.external-embed[src*="youtube"] {
    width: 100%; 
    height: 540px;
}

Thank’s a million