I'm trying to add a responsive layout with two iframes (Video(16:9) and Image(1:1)) side by side. Somehow I managed to search for a code that kind makes the layout responsive, the only problem that I'm facing right now is that I can't make the video to have the same height as the 2nd iframe has (image one), and at the same time to keep it's aspect ratio (16:9 since it's a youtube video).
What I have now (Demo w/ code): http://jsfiddle.net/dzw8jx4e/
HTML Code:
<div class="t_container">
<div class="ts_iframe">
<iframe frameborder="0" height="250" width="100%" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
</div>
<div class="tc_iframe">
<iframe frameborder="0" height="250" width="250" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
</div>
</div>
CSS Code:
.t_container{
display: inline-table;
width: 100%;
}
.ts_iframe{
display: table-cell;
width: 100%;
}
.tc_iframe{
width: 250px;
float:right;
}
#media (max-width: 768px) {
.t_container { display: block; }
.t_container .tc_iframe { display: block; width: 100%; float:none; }
}
An old way to keep aspect ratio is to use padding-top in percents, cause it will calculate it from available width. Here is an example:
body {
margin: 0;
}
.t_container::after {
clear: both;
}
.t_iframe {
position: relative;
float: left;
}
.t_iframe iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.t_video {
width: 64%;
padding-top: 36%;
}
.t_image {
width: 36%;
padding-top: 36%;
}
#media (max-width: 768px) {
.t_iframe {
float: none;
width: 100%;
}
.t_video {
width: 100%;
padding-top: 36%;
}
.t_image {
width: 100%;
padding-top: 100%;
}
}
<div class="t_container">
<div class="t_iframe t_video">
<iframe frameborder="0" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
</div>
<div class="t_iframe t_image">
<iframe frameborder="0" scrolling="no" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
</div>
</div>
Also on JSFiddle.
if not for complex custom table logic (or maybe even then, given some flexbox experience), i'd recommend the flexbox display style for this kind of work. It's very optimized for responsiveness and dealing with some rough html edges automatically.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
You can gain a feeling for it with this game
https://flexboxfroggy.com/
Here is your code where i just removed any particular style related to table and kept only the display: block on the yt video to make them appear on different lines beyond the media query (note: this in flex is easier obtained by forcing flex-direction: column on the parent container)
http://jsfiddle.net/kctda2vr/1/
Cheers, let me know if something is missing.
Related
Running the following code snippet will provide a framework for what I am visually hoping to accomplish, with some concessions made in the CSS that I'd like to remove:
body {
height: 100vh;
margin: 0;
}
.container>* {
height: 100%;
width: 100%;
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
.content {
background-color: blue;
flex: 1;
position: relative;
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
height: 56.25vw;
max-height: calc(100vh - 100px);
width: calc((100vh - 100px) * (1/0.5625));
;
max-width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="header"></div>
<div class="content">
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
Included are a header and footer of arbitrary height and a fixed aspect ratio box centered vertically and horizontally between them. I'd like it to letter- and pillar-box as the page is resized, and respond to increases/decreases in header height.
As it stands, the code accomplishes many of these goals but falls short in that it requires that the heights of the header and footer be included in the CSS for the fixed aspect ratio box. This limits my ability to freely manipulate the size of the header, or let it grow arbitrarily as a function of content (at least to the extent I am not using JavaScript).
I've managed to make this work successfully for the case of letter-boxing (top and bottom black bars) by leveraging the fact that the content is full-width. As a result, I can use 100vw / 56.25vw (in the case of 16:9) for the width/height and achieve the desired result. Unfortunately, when moving the content around to pillar-box, this obviously falls apart.
I've more or less resigned myself to needing JavaScript to - at the very least - toggle a class based on the dimensions of the inner content box to determine whether letter or pillar boxing is appropriate. However, it became very clear very quickly that setting width as a function of height is not trivial.
I was fortunate to come across this post, where a solution leveraging a 1x1 pixel is used to set width as a function of height.
I was able to successfully make this work for the pillar-boxing case in both Chrome and Safari, but not Firefox (IE11 and Edge not yet tested, but coverage is desired... pray for me). I'd like to get recent versions of Chrome/Safari/Firefox covered, as well as I11/Edge if possible.
The solution for Chrome/Safari is as follows:
body {
height: 100vh;
margin: 0;
}
.header,
.footer {
height: 100%;
width: 100%;
}
.container>* {
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
img {
display: block;
height: 100%;
background: orange;
}
.content {
background-color: blue;
flex: 1;
position: relative;
overflow: hidden;
height: 100%;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
background-color: purple;
position: absolute;
left: 0;
top: 0;
right: 0;
margin: auto;
bottom: 0;
}
<div class="container">
<div class="header"></div>
<div class="content">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
There are a few things to consider. I am comfortable with fixing the height of the footer. This constraint may prove valuable, but I've been unable to yield anything from it yet. I am also comfortable with radical alterations to the included markup, supposing it enables the desired behavior.
The end-purpose of this would be to maintain fixed aspect ratio content between this flexible header, static footer, and overlay content upon it.
I am well aware that I could run some JavaScript and set these heights manually with great success, but I am coming at this from a position largely based in intellectual curiosity. If you, too, are curious, perhaps you can lend a hand in exploring :)
Thank you!
How can I get rid of this extra white space that iframes create? I am using a reference to a web app but, as far as I know, it should stretch to any 16:9 aspect ratio window. This isn't happening though. It seems this happens with other videos too, but the sides are often transparent. Is there a way I can do that here? Thanks
HTML:
<body background="images/Background.png">
<iframe id="primaryVideo" src="http://54.202.201.116/app/5/">
<p> Your browser does not support iframes. </p>
</iframe>
<button id="restart" left="1%">Start Over</button>
</body>
CSS:
#videoWrapper{
height: 100%;
}
#primaryVideo{
width: 80%;
height: 80%;
border: none;
position: absolute;
float: left;
display: inline;
}
div{
text-align:center;
}
I dug into the layout of that address and found the real location of the video. I applied the styles suggested from this old but still relevant article. It's 100% responsive. If you don't want it as big as the viewport, adjust the width of div.frame accordingly.
Demo 1 is the actual video in an iframe, Demo 2 is the site the has the video within the iframe. The player in Demo 2 looks like videoJS plugin so if you play the video through that, then the dimensions are up to the site which is still responsive. You can't see it functioning on SO because the site in question does not support https. Check it out at this Plunk.
Demo 1
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://s3-us-west-2.amazonaws.com/static.tapmedialabs/tap_media_intro_video_v8.mp4' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
Demo 2 see Plunk for a functioning demo
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://54.202.201.116/app/5/' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
I have this:
I want this:
I've tried this:
html, body
{
height: 100%; //and this -> 100vh
}
but it didn't works.
Here is my code:
https://jsfiddle.net/zbjaaxe6/9/
Any solutions?
This problem is a good candidate for flexbox:
CSS
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh; // set min-height instead of height, otherwise body won't
// grow with content, if content is bigger than viewport
}
header {
height: 50px; // adjust to what you want
}
main {
flex: 1; // This will make the 'main' block to expand !
}
footer {
height: 30px; // adjust to what you want
}
HTML
<body>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</body>
Result:
Fiddle
Flexbox is an IE10+ solution. Browser support in detail
"With vw/vh, we can size elements to be relative to the size of the
viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th > the width of the viewport. To make an element the full width of the
viewport, for example, you'd set it to width:100vw."
-- Jonathan Snook, Sizing With CSS3's VW and VH Units
CSS:
[class*="col"] {
border: 1px solid black;
}
#menu{
display:none;
margin-top:20px;
position:absolute;
background: #fff;
z-index: 1;
}
body {
font: caption;
}
#content{
min-height: 90vh;
}
#footer{
min-height: 5vh;
}
#header{
min-height: 5vh;
}
HTML:
<div class="container">
<div class="row">
<!-- Small devices >= 768px Collapsed to start, horizontal above breakpoints -->
<div id = "header" class="col-xs-10"><span id="btnMenu" class="glyphicon glyphicon-menu-hamburger" aria-hidden="true">TITLE</div>
<div id="menu" class="col-xs-3 menu">
MENU
</div>
<div id="content" class="col-xs-10 content">
</span>CONTENT
</div>
<div class="col-xs-10" id = "footer">FOOTER</div>
</div>
</div>
Not ideal, but you could use absolute positioning:
.content {
position: absolute;
top: 20px;
bottom: 0;
}
Or, you could use viewport percentages if you are cool with supporting ie9+:
.content {
height: 100vh;
}
The styles should be on the content section, not the html/body.
EDIT: fiddle
I don't know if that's what you want but take a look :
https://jsfiddle.net/zbjaaxe6/23/
.content{
position: relative;
margin: 0;
min-height: 100vh;
}
I solved your issue using flexbox property.
.container,
.row {
display: flex;
flex-direction: column;
height: 100%;
}
#title,
#footer {
flex: none;
}
#content {
flex: 1 0 auto;
}
You can see here the solution.
I am using the following code to show some images but I can't figure out how to move them in middle. Does anyone has any idea?
CSS
.cover-image{
max-width: 300px;
max-height: 250px;
}
HTML
<div class="row" id="covers">
<div class="col-xs-6 col-sm-4">
<div class="cover" style="margin-bottom: 10px;">
<a target="_blank"><img class="cover-image" /></a>
</div>
</div>
</div>
JS
$.ajax({
type : 'GET',
dataType : 'json',
url: 'data.json',
success : function(data) {
var data = data.info;
var covers = document.getElementById("covers");
var blockTemplate = covers.getElementsByTagName("div")[0].cloneNode(true);
covers.getElementsByTagName("div")[0].remove();
data.forEach( function(obj) {
block = blockTemplate.cloneNode(true);
block.getElementsByTagName("a")[0].setAttribute('href', obj.link);
block.getElementsByTagName("img")[0].setAttribute('src', obj.cover);
covers.appendChild(block);
});
$("img").css({"vertical-align":"middle"});
}
});
A demo of what is showing now is here: http://tdhtestserver.herobo.com/test/
Just a try
Is this what you want
Have to use psuedo-css
.cover {
border:1px solid;
height:200px;
width:200px;
vertical-align: middle;
text-align: center;}
.cover:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.cover-image {
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align: middle;
}
This may make the question more clear.
Fiddle Demo
If you want to align image middle-center, you can set fixed size to your .cover and set the max-width and max-height to the a. Then you can align the a using absolute position and css transform. Example:
.cover {
width: 300px;
height: 250px;
position: relative;
}
.cover a {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Here is what I tried in JSFiddle:
http://jsfiddle.net/7w5fw7fw/
I placed the images directly into the div container:
<div class="row" id="covers">
<img src="http://sjhitsquad.net/wp-content/uploads/freshizer/3d142cc9444fe922cf69cf90e344ce5f_placeholder-920-350-c.gif">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="https://www.adspeed.com/placeholder-123x456.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
</div>
Wrapping every single image in a separate div doesn't appeal to me a lot. If there is such a need, than it is better to use <figure>, which is semantic.
And here is the CSS that places the images in the middle:
html, body {
height: 100%;
margin: 0;
}
#covers {
background: yellow;
width: 100%;
min-height: 100%;
text-align: center;
}
img {
max-width: 300px;
min-height: 250px;
vertical-align: middle;
}
The background color is there just to show you how wide and high the container is (as much as the whole body element). Depending on the window width the images may all appear in a single row or break into many rows.
Is this close to your searched behaviour?
Your question is not clear but i think you want this
try to add this on your body
body {
margin: auto !important;
}
I'm wondering how I can tackle these problems I'm facing.
DemoJS Bin Demo
What I'm trying to achieve is this:
.display and it's content should adapt to the size of the screen. If the viewport width is too narrow (same with viewport height) – .display
should shrink and all enclosed items should keep their ratio.
.display and all content should be centered, vertically and horizontally.
Let vimeo items have the same aspect ratio as the images (vimeo embed forces 16x9 aspect ratio, but I'd like the height of the video
to be the same as the images and let vimeo add black bars to fill
out).
And on a side note, as I have absolute positioned divs above the actual content (.cursor .left and .cursor .right) controlling the vimeo video will prove to be somewhat problematic. Are there any other solutions out there that could potentially work the same way as these divs do but enable interaction with the content underneath?
Here's a site that have absolute dead center and that keeps ratio of the enclosed items when resized, this is exactly what I'm trying to achieve. I could not figure out how they made this happen other than JS is involved.
Bureau Collective
HTML
<div class="display">
<div class="cursor left"></div>
<div class="cursor right"></div>
<div class="work-carousel">
<div class="item"><img src="http://lorempixel.com/output/abstract-q-c-1080-675-7.jpg"></div>
<div class="item"><img src="http://lorempixel.com/output/nightlife-q-c-1080-675-9.jpg"></div>
<div class="item"><iframe src="http://player.vimeo.com/video/57840967?title=0&byline=0&portrait=0&color=000000" width="1080" height="608" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
</div>
CSS
.display {
position: relative;
width: 1080px;
}
.cursor.left {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 45%;
z-index: 999;
}
.cursor.right {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 45%;
z-index: 999;
}
.work-carousel {
margin:50px auto 60px;
padding:0;
}
.work-carousel item {
max-height: 100%;
max-width: 100%;
display: none;
}
.work-carousel item.first {
display: block
}
I thought I'd never use this technique!
The trick is in the padding:
.display {
position: relative;
width: 100%;
height:0;
padding:56.25% 0 0 0;
}
.item{
width: 100%;
height: 100%;
}
.item > * {
width: 100%;
height: 100%;
}
Here is the demo: http://jsbin.com/epeqar/7/edit