https://i.sstatic.net/AZ7T4.png
My iframe was resized to 65%, but the containing "div" still occupies the original iframe size, creating a large gap between the iframe and the next element. I'm not sure how to remove this gap. I want the next element to be directly below the embedded iframe. Here is the HTML code:
@media only screen and (min-width:768px){
.container-iframe{
-moz-transform: scale(0.65, 0.65);
-webkit-transform: scale(0.65, 0.65);
-o-transform: scale(0.65, 0.65);
-ms-transform: scale(0.65, 0.65);
transform: scale(0.65, 0.65);
-moz-transform-origin: center;
-webkit-transform-origin: center;
-o-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
}
.iframe-responsive{
bottom: 0;
float: center;
height: 100%;
left: 0;
position:absolute;
right: 0;
top: 0;
width: 100%;
}
}<div class="container-iframe">
<iframe class="iframe-responsive" src="https://www.youtube.com/embed/chw2oMUrh4U"></iframe>
</div>
<div class="row">
<div class="col" style="text-align: center;">
<h1>Something 1</h1>
</div>
</div>
<div class="row">
<div class="col" style="text-align: center;">
<h1>Something 2</h1>
</div>
</div>