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.
Related
How can I center a div with max-width and max height, but also maintain it's aspect ratio?
My code so far centers div, but it does not maintain aspect ratio of 6:5 (height:width)
#main-content {
margin: 0 auto;
width: 100%;
max-width: 1200px;
height: 100%;
height: 500px;
background-color: #953d44;
position: relative;
}
#container {
width: 80%;
height: 80%;
max-height: 600px;
max-width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background-color: cornflowerblue;
}
<div id="main-content">
<div id="container"></div>
</div>
https://codepen.io/timsim/pen/dWMbqR
You couldnt notice the change because the main container itself had only 500px height. I have changed it to 1000px.
Run the following snippet and goto full screen mode, It actually works!
#main-content {
margin: 0 auto;
width: 100%;
max-width: 1200px;
height: 100%;
height: 1000px;
background-color: #953d44;
position: relative;
}
#container {
width: 80%;
height: 80%;
max-height: 600px;
max-width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background-color: cornflowerblue;
}
<div id="main-content">
<div id="container"></div>
</div>
P.S.: Ofc this wont work if main container height is less then the max height specified for the contanier.
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?
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?
I'm not sure as to why when I drag my browser around my text and video overlap. I want to prevent this:
Here is a jsfiddle example:
https://jsfiddle.net/liondancer/m3xug7vo/
example:
Here is the CSS regarding the particular page:
.wrapper {
width: 950px;
margin: auto; /* Centering blocks */
/*position: relative;
display: block;*/
}
.index {
}
.video-container {
position: relative;
min-width: 100%;
min-height: 100%;
/*width: auto;
height: auto;*/
z-index: -100;
background: no-repeat;
/*background-size: cover;*/
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.title-area {
height: 100%;
width: 100%;
vertical-align: middle;
.container {
width: 100%;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
position: relative;
}
}
.index-aboutus {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
display: block;
}
.index-ourwork {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
.index-instructors {
position: relative;
min-width: 100%;
min-height: 100%;
height: 100%;
}
The HTML:
The video container is using a height of 100vh, there is one thing you have to think of:
The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly. However,
when the value of overflow on the root element is auto, any scroll
bars are assumed not to exist.
See http://www.w3.org/TR/css3-values/#viewport-relative-lengths
An easy way to fix this would be to add a class to the parent div of video-container and add a property to set it to overflow: hidden;
It would look like the following:
.video-containerParent {
overflow: hidden;
}
Please see the following jsFiddle for an example:
https://jsfiddle.net/m3xug7vo/1/
The following site has an interesting article about viewport units:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/