Change width and height of embedded videos?

[CUB_Luke]

hello,
I have a field in which I place links or embedded videos.

for example this code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/pIDmePznLBo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

my problem is that even with the help of html injector I can’t seem to change the general width and height of the embedded video via the styling section. I tried googeling and the upcoming solutions didn’t work on my side. And I don’t want to change the height and width manually via the html.

the field I put in the back is

{{#Externer Link oder Video}}<div class="LinkOrVideo" id='LinkOrVideo'>{{Externer Link oder Video}}</div> <br>{{/Externer Link oder Video}}

and help is appreciated.

Thanks in advance !

[Klu]

from this website: Tutorial: How to Embed a Youtube Video into an Anki Card

by Shorouk.dev (sorry won’t let me insert links)

about half way down (under section 3) is says:

" If you want to change the dimensions of the video you can edit the width="70%" and height="350px" values "

[CUB_Luke]

thanks for the reply, but I was searching for a way to skip the part where I have manually to adjust width and height in the html. Instead targeting the video via the styling section which is helpful because I want to have different vaules for .iphone and .ipad

[NielegalneApfelschor]

You can change the iframe size in the styling tab like this:

iframe{
  height: 200px;
  width: 200px;
}

If it does not work, maybe there are some styles applied to .LinkOrVideo or #LinkOrVideo that collide with it.

[CUB_Luke]

sometimes I feel like a dummy. I tried that with “.” before iframe and it didn’t work. Thanks you for the solution!

[NielegalneApfelschor]

. refers to classes, like .card and <div class="card"></div>. You can learn more about css selectors here: CSS selectors - Learn web development | MDN