I have a container (main-container) with position=fixed.
I have other containers inside this container.
<div class="main-container">
<div class="container0">
<div class="container">
<div class="wrapper">
<iframe name="case-overlay-iframe" class="preview-iframe voice" allowfullscreen="true" src="https://cc-api-cp.adobe.io/api/v2/voice/assets/4ICee/video/embed?api_key=LucaApp1"></iframe>
</div>
</div>
</div>
</div>
I need the iframe to keep its aspect ratio of 16:9 as people resize the window.
I also need it to display in the center (vertically & horizontally centered)) every time.
I also need it to keep a maximum height and width of 1280px (width) and 720 (height).
I use the CSS below to achieve this, but unfortunately, the CSS doesn't do the following:
- The Iframe is not vertically and horizontally centered.
- The iframe must keep a width of calc(100% - 440px) (see below) but its width gets smaller than that.
.main-container {
position: fixed;
width: 100%;
height: 100%;
z-index: 1005;
top: 0px;
left: 0px;
overflow: auto;
}
.container0 {
position: absolute;
min-width: 700px;
min-height: 400px;
width: 100%;
height: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 200;
background: #262626;
}
.container {
background: #1c1c1c;
width: calc(100% - 440px);
height: 100%;
display: flex;
max-width: 1280px;
max-height: 720px;
}
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
width: 100%;
margin: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Can someone please help?
Related
I have problem with how to make children size following its parent. The case below.
HTML
<div class="video">
<div class="spot">
<img src="..." alt="">
<button>x</button>
</div>
</div>
CSS
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
position: absolute;
max-height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
max-width: 100%;
/* width: 16%; only height can affect image on content*/
}
.spot img {
width: 100%;
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
What I want to do is to make the image follow the spot height. Because if I set width (whatever size), the image will follow the spot width. Anyone know how to do this?
I also create jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/.
Your image is already following your .spot height. Check the border on spot. Or do you mean overflow? Or do you want your .spot to follow your .video?
console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());
.video {
width: 600px;
height: 500px;
background: #000;
position: relative;
}
.spot {
border: red 2px solid;
position: absolute;
height: 40%;
/*width: 20%;*/
top: 0;
left: 0;
margin: 0;
padding: 0;
max-width: 100%;
overflow: hidden;
}
.spot img {
/*width: 150%;*/
height: 100%;
}
.spot button {
position: absolute;
top: 0;
left: 100%;
margin-left: -24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<div class="spot">
<img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
<button>x</button>
</div>
</div>
You have set max-width instead of width. max-width will not set the width to the given value, it will just prevent the width from surpassing the given value.
.spot {
position: absolute;
height: 30px;
top: 0;
left: 0;
display: table;
margin: 0;
width: 100%;
}
When coding an iframe to resize with the screen I cannot center it. I tried all the responses from THIS question but had no luck. Am I missing something obvious or is there no way to do this?
HTML
<div class="videoWrap">
<iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>
CSS
.videoWrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 100%;
}
Using the question you linked...
.videoWrap {
display: flex;
align-items: center;
justify-content: center;
}
.videoWrap iframe {
width: 300px;
height: 300px;
}
div, body, html {
height: 100%;
width: 100%;
}
<div class="videoWrap">
<iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>
You can try applying margin: auto; css property to your div.
https://www.w3schools.com/css/css_align.asp
In my example I am centering the wrapper element horizontally and vertically with the usual settings (position: absolute` is applied here), and also defining the width and height here. The video itself simply fills the centered wrapper.
html, body {
height: 100%;
margin: 0;
}
.videoWrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 16:9 */
width: 80vw;
height: 45vw;
}
.videoWrap iframe {
width: 100%;
height: 100%;
}
<div class="videoWrap">
<iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>
Use left: 50% and transform: translateX(-50%):
.videoWrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrap iframe {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 100%;
}
In order to force an element to the bottom of its container I need css and html like
#container {
position: relative;
width: 100%;
min-height: 100%;
}
#content {
width: 800px;
min-height: 100%;
margin: 0 auto;
padding-bottom: 100px;
}
#footer {
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
}
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
But in order to fix the height of the content div to a minimum of 100% in Safari I need to have css like this
#content {
position: absolute;
left: 0;
right: 0;
width: 700px;
min-height: 100%;
margin: 0 auto;
padding-bottom: 100px;
}
This causes the footer to not stick to the bottom of the container when the content div's height expands beyond 100%.
Is there a way to have these two affects take place simultaneously?
Here's the HTML:
<div class="container">
<div class="wrapper">
<iframe src="...."></iframe>
</div>
</div>
The wrapper div has CSS:
position: relative;
width: 100%;
height: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
The iframe has CSS:
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
The container has CSS:
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
max-width: 1280px;
max-height: 720px;
I'm trying to protect the aspect ratio 16:9 of the iframe as the window resizes and also maintain a maximum height for it of 100% - 67px calc(100% - 67px). How can I do the two at the same time?
I had the same issue. Ended up making another wrapper for the wrapper to get the effect of both.
The inner wrapper ensures that the aspect ratio is retained as padding-bottoms' value is scaled from width. The iframe fills it's container, and the outer wrapper provides the max-width so that it stops expanding after 865px.
.video-wrapper-wrapper {
max-width: 865px;
margin: auto;
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 82%;
iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
}
}
Instead of using padding to set the height, set the height to the viewport width:
height: 56.25vw; /* 16:9 */
You can then set a max-height to whatever you like.
The solution is to wrap the entire thing in an element with max-height: ___; overflow: hidden.
I have a 4:3 parent, and a child shrinked and centered. Finally a 4:3 child inside.
.table {
position: relative;
width: 400px;
height: 300px;
border: 1px solid;
}
.top {
position: absolute;
left: 15%;
right: 15%;
top: 20%;
bottom: 20%;
background: yellow;
}
.item {
position: absolute;
width: 10%;
height: 50%;
background: pink;
}
<div class="table">
4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
.table has a 4:3 aspect ratio
.top is distanced by equal amount from the edges of .table
.item should have a 4:3 aspect ratio
In this code .top is centered and distanced equal from .table.
Problem is .item doesn't have 4:3 aspect ratio. (I gave it arbitrary height, width). Here's an codepen demo.
Note: .top is preferred to be distanced equal, it may be close to equal.
You can achieve this with CSS only and the padding-bottom technique to maintain the aspect ratio of the elements. It relies on the fact that percentage padding is calculated according to the with of the container (w3.org reference).
In the following example, I applied the aspect ratio on the .top element (centered it with absolute positioning and margin:auto; ) this way, you can size .item with width:100%; height:100%; as .top already has a 4:3 aspect ratio:
.table {
position: relative;
border: 1px solid;
width: 400px;
height: 300px;
}
.top {
position: absolute;
width: 70%;
height: 0;
padding-bottom: 52.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: yellow;
}
.item {
background: pink;
position: absolute;
width: 100%;
height: 100%;
}
<div class="table">4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
This technique also allows you to make the elements responsive by applying the padding technique to the .table element too:
.table {
position: relative;
border: 1px solid;
width: 30%;
padding-bottom:22.5%;
}
.top {
position: absolute;
width: 70%;
height: 0;
padding-bottom: 52.25%;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: yellow;
}
.item {
background: pink;
position: absolute;
width: 100%;
height: 100%;
}
<div class="table">4:3
<div class="top">
<div class="item">4:3</div>
</div>
</div>
You could use margin for .top:
.top {
margin: auto xx auto xx; /* top right bottom left */
}
And then you could set width and height of item:
.item{
height: 200px; /* example */
}
And then you use jQuery to set width:
var cw = $('.item').width();
$('.item').css({'height': 1.2 * cw +'px'});