Size of Youtube Video

[Anwen]

What I’m trying to do

I regularly insert youtube videos into notes via iframes. I used to have no problems. Recently, I can’t get them at the size I want.
I tried again with a test vault.
Without plugins, snippets or themes:
with this :

<iframe src="https://www.youtube.com/embed/DbsAQSIKQXk" title="YouTube video player" allowfullscreen></iframe>

with this:

<iframe height="100%" width="100%" src="https://www.youtube.com/embed/DbsAQSIKQXk" title="YouTube video player" allowfullscreen></iframe>

or this:

<iframe width="100%" src="https://www.youtube.com/embed/DbsAQSIKQXk" title="YouTube video player" allowfullscreen></iframe>`

I tried to modify with css but impossible m correct to have a video of the width of the note with the right ratio. Would anyone have an idea ?

[ariehen]

Does setting a width of 100% and a fixed height work for you?

<iframe width="100%" height="310" src="https://www.youtube.com/embed/DbsAQSIKQXk" title="YouTube video player" allowfullscreen></iframe>

[Anwen]

Thank you for your response.

I actually manage to get a good ratio like this:

<iframe width="100%" height="512" src="https://www.youtube.com/embed/DbsAQSIKQXk" title="YouTube video player" allowfullscreen></iframe>

But I used to be able to do it with just 100% and 100%. Isn’t there a way to get a good ratio for all videos without having to harden the size?

[ariehen]

@Anwen

Isn’t there a way to get a good ratio for all videos without having to harden the size?

I’m not sure about that. I don’t use iframes in my vault. Can you pinpoint what Obsidian version the behavior changed for you?

[Anwen]

@ariehen

I’m not sure about that. I don’t use iframes in my vault. Can you pinpoint what Obsidian version the behavior changed for you?

I’m in the v1.5.3, but I don’t sure that it appeared with this version.

[ariehen]

You could try something like this for all YouTube iframes. The border-radius: 30px; section is optional. It seems to work in live preview and reading modes.

iframe[src*="youtu"] {
    width: 100%;
    height: 512px;
    border-radius: 30px;
}

…at least you won’t have to put the width and height in each iframe, but I understand this still isn’t ideal.

[Anwen]

It works well enough to keep this, thank you.