I want to set an iframe.children video of any website as a div.parent background. the children iframe will always be bigger than parent div and parent div overflow will be hidden. Iframe will also keep aspect ratio. I found some jquery plugins but I want to understand how it works. Please help me.
What you're talking about is basically intrinsic ratio†. A ratio must maintain width and height at a constant relative value so when width increases or decreases, the height of a video does likewise of course. We can do this by creating a container (usually a <div>) that has the desired dimensions (usually 16:9 for widescreen or 4:3) and place the iframe and/or video within that container.
The technique commonly employed for a responsive video embedded within an iframe is as follows:
box (a.k.a container, or wrapper)
This div will be triggered by any re-sizing. For any element in the DOM a re-size involves calculation of height and width at the least.
Further down this post I made a simple demo.
Notice the width: 100%and the padding-bottom: 56.25%.
If width increases from 100px to 200px , then height increases from 56.25px to 112.5px.
The ratio of 16:9 is constantly maintained by setting the padding-bottom: 56.25%. If you have an older video with the aspect ratio‡ of 4:3, you'd use padding-bottom: 75% If you have a non-standard aspect ratio like 8:21, you can find the padding-bottom percentage by dividing the denominator by the numerator like so: 8/21 = .38 = 38% (The quotient was rounded down).
So the funky padding-bottom percentage acts like an inflatable cushion that inflates or deflates according to when width changes, but only enough to re-size the height within the parameters of the ratio.
The extra padding-topis to counter the huge padding-bottom otherwise the video will be pushed too far and cause overlapping of elements. The height:0 is probably not necessary as this weird value was to deal with I.E.6. I just left it in there just for that edge case (you know just in case you time traveled back to 2001 or you live in a cave in the middle of the Gobe Desert.)
iframe
The rule sets for the iframe are a lot easier to explain. Simply put, the iframe (and the video) height and width are stretched to fit perfectly within .box. So basically it's .box that does all the work and the iframe goes along and conforms to the dimensions of .box.
.box {
position: relative;
padding-bottom: 56.25%;
/* [56.25%= 16:9 ] [ 75% = 4:3 ] [ 41.66% = 24:10 ] */
padding-top: 25px;
height: 0;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<div class="box">
<iframe id="ifrm" src="https://arcx.s3.amazonaws.com/av/test.html"></iframe>
</div>
By now you should be thoroughly confused by my ramblings, so I strongly advise you to read these articles:
Creating Intrinsic Ratios for Video
Fluid Width Video
What is Aspect Ratio?‡
A Box with an Intrinsic Ratio†
Related
My work requires 100 windows next to each other having the smallest sizes possible.
Image: https://i.imgur.com/Yg2St2U.png
a. For height, it is limited by the message box, which I reduced to 88px by adding this in the userChrome.css
* {
font-size: 3pt !important;
font-family: Leelawadee !important;
}
This is the smallest legible font size and font for me, so I'm satisfied with 88px height.
b. For width, I added this in the userChrome.css
#main-window:not([chromehidden~="toolbar"]) {
min-width:20px!important;
}
But Firefox's windows refused to be reduced under 126px, which I'm very frustrated about. I know the limit is 100 pixels, so I just need to reduce my window width to 100 pixels, it would help me a lot. So,
Can you suggest a way to reduce the message box size while increasing the font size?
Can you tell me how to reduce window width to 100px?
1) for font size you can use 'font-size' in css and specify the size that you want, if you have a box as a div element give an id to it and in css specify a width:
<div id="box">Something</div>
css:
#box {
width: 100px;
height: 100px;
}
p {
font-size: 1.5rem;
}
keep in mind that for size and positioning of an elements is recommended to use a framework like bootstrap.
2) You can use window object that has this methods
window.open
window.resizeTo
with these two methods you can open a new window and resize it
Chrome for iOS hides its address bar when the user scrolls up. This feature does not work well with 100vh (or any vh unit) because as the toolbar shrinks, the viewport height changes and thus the size of the element changes. I have a cover image with 100vh and it causes a very noticeable jitter as the length of the entire page grows or shrinks.
The problem exists for any height set with vh, I think.
I can (and probably will) resort to javascript to set my cover image height, but I'd prefer to use vh.
Any clever ideas?
I'd recommend using 100% instead of 100vh - you can add this...
body{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
From there, any element without another wrapper that has its own height will be able to fill the full screen just using width and height at 100%. Example below!
https://codepen.io/will0220/pen/KXqoGZ
I got a problem with scaling my svg pictures. Actually, I'm creating a design for a html cardgame.
Here is a picture of the window:
The scaling is correct, because there is enough space in both directions, so the svg fills the space.
But when I'm gonna resize the window and the width gets smaller and smaller, something like that happens:
So, the scaling of the picture svg itself is correct, but html/css thinks that the image is the whole part inside of the displayed border lines. I just took the image with a drag'n'drop to visualize the problem.
HTML: (just a part, here the last row)
<div id="playerRow">
<img id="playerCard2"/>
<img id="playerCard3"/>
<img id="playerCard4"/>
<img id="playerCard5"/>
</div>
CSS:
#playerRow{
display:flex;
flex-direction:row;
justify-content: center;
align-items: center;
background-color: forestgreen;
border-style: solid;
border-radius: 20px;
height: 45%;
}
#playerCard1, #playerCard2, #playerCard3, #playerCard4, #playerCard5 {
min-width:0px;
min-height:0px;
height:90%;
margin:1vh;
border-style: dashed;
border-color: #555555;
border-radius: 15px;
}
I'm quite sure that there is a mistake with the height. Because when I put the height from 90% down to 40% it looks better for the resized width-low window.
I tried to use max-height instead height, but that doesn't make any difference.
What could be the problem? I just want to scale the border lines to the size of the image. I tried also with javascript a kind of rescaling, but the problem is, that I can't get the height of the svg, it always takes the whole part. Furthermore, I also want to know if that problem is possible to solve only in CSS.
EDIT:
The last row with the ratio css trick:
I solved my problem.
First of all, I used the CSS-ratio trick, which is described here: Responsively change div size keeping aspect ratio
But the problem still appeared, because the width was responsible for the resolution. So when the width grows, the height grows too, that's correct, because it always takes care of the defined ratio. The only thing is, that the correct width has to be calculated.
So, everytime the window has been resized, the width has to be recalculated. I'm doing that with javascript:
function correctRatio(card, div){
width =$(div).width();
currentHeight = $(div).height();
wrongWidth = $(div).width();
newWidth = 9/14 * currentHeight;
if(wrongWidth+1 > newWidth){
newWidth = newWidth/(width/100);
}else{
newWidth = 100;
}
$(card).width(newWidth+"%");
console.log("Setted Width:" + newWidth);
}
The 9/14 resp. 14/9 is in my case the ratio 9:14
You should be able to have the card containers keep their aspect ratio using this trick.
Responsively change div size keeping aspect ratio
I'm having a hard time now trying to make same sized thumbnails,
I have a simple gallery script that just takes all images out of database and places them to the page with max width 150px and max height 150px.
Now , it looks weird because all images have different shape, is there any way to make them same size without breaking the image apart? The simplest way possible please.
I don't want to have an option on uploading step to chose dimensions for thumbnail.
With img you only have two options: Set a maximum width, or a maximum height. Either way you won't get reasonably-sized thumbnails: If you set the maximum width, then some images will be too tall. If you set the maximum height, then some images will be too wide. If you set both width and height, it'll get horribly distorted, because it will ignore the aspect ratio.
Instead, I suggest making a div of a fixed size and setting the thumbnail as its background-image, then setting background-size to cover. This will give much better thumbnails, as it scales and crops the image to make it fit. If you want to avoid cutting off the image's edges, give the div a background-color and set background-size to contain, which instead scales down the image to make it fit and creates a "letterbox" effect.
Putting it all together (plus thumbnail centring for the crop, and inline-block so it acts like an <img> tag does):
<style>
.thumbnail {
background-color: black;
width: 250px;
height: 200px;
display: inline-block; /* makes it fit in like an <img> */
background-size: cover; /* or contain */
background-position: center center;
background-repeat: no-repeat;
}
</style>
<div class=thumbnail style="background-image: url(image1.jpg);"></div>
<div class=thumbnail style="background-image: url(image2.jpg);"></div>
Here's a jsfiddle demo for cover: http://jsfiddle.net/tbeog5o9/24/
And here's a jsfiddle demo for contain: http://jsfiddle.net/tbeog5o9/25/
There is another nice way to achieve this using object positioning
.thumbnail video, img {
width: 100%;
height: 100%;
object-fit: cover;
}
Please have a look on this article for details
Do all of your images have the same aspect ratio? The aspect ratio is the width divided by the height.
If all images have the same aspect ratio, you can scale them to the same shape by choosing a width and calculating the height, or choosing a height and calculating the width.
If the aspect ratios differ, there is no way to fit the images into the same shape without mangling images. There are two ways to mangle an image:
Cut off part of the image so that it fits your chosen shape.
Squeeze or stretch the image into your chosen shape.
If you don't want to mangle your images, you must preserve their aspect ratios. This means, indeed, that the thumbnails will have different shapes. You may think that this looks weird, but most people think it's even weirder when thumbnails are truncated, squeezed, or stretched in order to fit them into a uniform shape.
My jsfiddle example: http://jsfiddle.net/larryjoelane/tbeog5o9/38/
<img class="resize" src="http://cdn.moneycrashers.com/wp-content/uploads/2012/03/apple-imac-27.jpg"/>
<img class = "resize" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-pya5LcLCg82HTG3R36aS9B59SSjNzewp8tAHFZrjFjRb1rXI"/>
CSS:
img.resize{
max-width:150px;/*rendered height will be 103px and width will be 150px*/
}
You will have to change the img tag url's in my example to match your image url's of course and add the class resize to your img tags.
The rendered height of the image will be 103px but the image will not look distorted.
Oh man this is frustrating. I always thought I know my way around HTML and CSS but this is driving me crazy!
I have a blank black HTML page only containing a 16:9 iframe with the id "content".
In this iframe videos and photos with an 16:9 aspect ratio will be shown to the user (this will be an offline application running in Firefox, something like a primitive media player).
Everything inside the iframe works (quite an elaborate multimedia experience) everything is fine EXCEPT the placement/dimensions of that "player" iframe on the blank index page!
It needs to be centered VERTICALLY with a width of 100% thus touching both sides of the browser window,
it needs to be responsive when the browser windows is resized but needs to keep its aspect ratio of course,
and most important; it must always be completely visible! Meaning I must NOT be cropped by the browser window!
No big deal I reckon with tall 4:3 or 5:4 displays, when centered vertically there will be bars at the top and the bottom of the iframe (the black HTML body) and it won't be cropped anywhere.
But kind of a big deal with 16:10 an 16:9 displays since the browser toolbars and the Windows task bar and what have you screw everything up, the aspect ratio isn't really 16:9 or 16:10 anymore when the browser is maximized. So the 16:9 iframe would not be completely visible, it would get cropped a the bottom.
(or maybe the user hasn't even maximized the browser and uses the application in an awkward proportioned window with an even more extreme aspect ratio).
So the iframe needs to STOP growing responsively before its bottom side gets cropped by the browser window. Never be taller than 100vh.
I tried A LOT and in the end I had convoluted div-arrays with a shtload of CSS that accomplished almost everything except the bottom clipping.
I am aware of things like "vh" and "vw" and "max-height" and what have you and I tried A LOT. Never got that iframe from being cropped at the bottom when the browser windows gets too long. I tried things similar to THIS:
Vertically center responsive iframe
but with this the elements height cannot be limited to "100vh" since it uses this padding-workaround for keeping its aspect ratio. :-(
I mean this must be possible, right? A centered (h&v) 16:9 div/iframe that uses as much screen estate as possible but refrains from being cropped anywhere.
HELP PLEASE! Thank you!!
Taken from Bootstrap 3.0, just apply the CSS class and whether it should be 16 by 9 or 4 by 3:
JSfiddle with the result: http://jsfiddle.net/crisbeto/jvcg8v0y/
/* Embeds responsive
Credit: Nicolas Gallagher and SUIT CSS. */
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.embed-responsive.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
padding-bottom: 75%;
}
create a <div> and give that the ID "pusher" like this:
<div id="pusher"></div>
and then add these css properties:
#pusher{
height: 50%;
}
now set the css properties for your iframe, Give this a top-margin of minus half the height of the iframe, so if the iframe was 300 pixels heigh, your css for the iframe would be:
iframe{
margin-top: -150px;
}
you could probaly use:
iframe{
height: 100%;
width: 100%;
margin-top: -50%;
}
when you apply this method, what you basicly do is push all content to the vertical center of the screen, that way the "origin point" is at the center of the screen (vertical) now to center it like you needed you are applying the negative margin to center the "center point"