Change width and height of embedded videos?

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

for example this code:

<iframe width="560" height="315" src="" 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 !

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

by (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 "

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

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

  height: 200px;
  width: 200px;

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


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

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


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.