How to keep the aspect ratio of an element such as video iframes with CSS

SOLVED: How to keep the aspect ratio of an element in responsive views.
How to keep the aspect ratio of an element such as video iframes with CSS
How to keep the aspect ratio of an element such as video iframes with CSS

For KAS developers, the following classes already exist in the bootstrapXP file.

To accomplish this task we need a parent element that will keep the aspect ratio, and a child element, in this case an iframe with a video, that will fill up the parent with 100% width and 100% height.

<div class="AR-16-9">
    <iframe class="aspectRatio" src="my video" />
</div>

The class AR-16-9 indicates the type of aspect ratio, here we see a 16:9, the way it works is that the AR classes will have a padding in percentage that creates the ratio, here is the full list that yiou can use:

 
.AR-1-1{
position: relative;
padding-bottom: 100%;
}

.AR-16-9{
position: relative;
padding-bottom: 56.25%;
}

.AR-4-3{
position: relative;
padding-bottom: 75%;
}

.AR-3-2{
position: relative;
padding-bottom: 66.66%;
}

.AR-8-5{
position: relative;
padding-bottom: 62.5%;
}

 

Since it is a padding, there is no space for content, therefore the child needs to be in position absolute and the parent relative, here is where the aspectRatio comes into play, you can also asume that iframes will behave this was, so we added them to the selectors:

.AR-1-1 iframe,
.AR-16-9 iframe,
.AR-4-3 iframe,
.AR-3-2 iframe,
.AR-8-5 iframe,
.aspectRatio{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

Comments

Get a Quote

Get a Quote