How can I custom iframe sizes and styles?

[JarisGV]

I need to use iframes for a lot of situations where the default ratio or sizes don't fit the purpose.
Creating New Venobox() I got some different iframe sizes e.g. iframe960 (width: 960px), iframe540 (width: 540px) and iframefull (width: 100%), but the problem is that the iframe shares the same styles for videos, inline content, ajax, maps, url..., so how can I associate specific styles to them? For example, in my 480px, 540px and 960 iframes I have border-radius: 15px, but in iframefull I don't need border-radius and I have to get rid of the paddings in .vbox-content once in full version all content inside iframe should touch the edges of the screen.

I created a pen to make it clear:

(https://codepen.io/byJaris/pen/dyVveVq )

Thnaks in advance.

Jaris GV

[nicolafranchini]

Check this, 2.0.4:
https://jsfiddle.net/veno/ex6rg1jd/

• New option customClass and attribute data-customclass,
• The border can now be set globally or overridden by data-border=""
• There's a new variable available for option ratioand data-ratio="": full, to set 100% height to the content

[JarisGV]

Thank you so @nicolafranchini 🙏🏻🙏🏻🙏🏻

[JarisGV]

Just a little contribution here: to make the code cleaner I removed the Venobox data-attributes from the links and append them using pure javascript.

So, instear of:
<a class="iframe540" data-vbtype="iframe" data-gall="gall" data-customclass="iframe540" href="https://veno.es/venobox/">Open VenoBox</a>

I have only this on my HTML code:
<a class="iframe540" href="https://veno.es/venobox/">Open VenoBox</a>

Then:

<script>
    var venoGallery = document.querySelectorAll('.iframe540');
    venoGallery.forEach((galleryLink) => {
	 galleryLink.setAttribute("data-vbtype","iframe");
         galleryLink.setAttribute("data-gall","gall2");
         galleryLink.setAttribute("data-customclass","iframe540");  
    });
</script>

BUT as I am not a Javascript programmer I would like to know if this is a suitable alternative to make the HTML code cleaner.