Skip to content

BootstrapTema/calci

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

CalcI

Responsive Calc Iframe: Ratio Video 16/9, Ratio Video 9/16, Ratio Video 3/2, Ratio Video 4/3
Bootstrap 3,4,5
##CSS


.calci {position:relative;width:100%;height:0;overflow:hidden}
.c-16-9 {padding-top:calc(100%/(16/9))}
.c-9-16 {padding-top:calc(100%/(9/16))}
.c-16-9,.c-9-16 iframe {width:100%;height:100%;position:absolute;top:0;left:0}
.c-3-2 {padding-top:calc(100%/(3/2))}
.c-3-2 iframe {width:calc((100%/(3/2)) * (16/9));height:100%;position:absolute;top:0;left:calc((100% - ((100%/(3/2)) * (16/9))) / 2)}
.c-4-3 {padding-top:calc(100%/(4/3))}
.c-4-3 iframe {width:calc((100%/(4/3)) * (16/9));height:100%;position:absolute;top:0;left:calc((100% - ((100%/(4/3)) * (16/9))) / 2)}

##SCSS


.calci {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
}
.c-16-9 {
	padding-top: calc(100%/(16/9));
}
.c-9-16 {
	padding-top: calc(100%/(9/16));
}
.c-16-9,.c-9-16 iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.c-3-2 {
	padding-top: calc(100%/(3/2));
	iframe {
		width: calc((100%/(3/2)) * (16/9));
		height: 100%;
		position: absolute;
		top: 0;
		left: calc((100% - ((100%/(3/2)) * (16/9))) / 2);
	}
}
.c-4-3 {
	padding-top: calc(100%/(4/3));
	iframe {
		width: calc((100%/(4/3)) * (16/9));
		height: 100%;
		position: absolute;
		top: 0;
		left: calc((100% - ((100%/(4/3)) * (16/9))) / 2);
	}
}

##Code


<div class="calci c-3-2">
<iframe src="http://url.swf" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Releases

No releases published

Packages

No packages published

Languages