so I'm somewhat new to front-end development and took it upon myself to learn it through trial and error but it seems as if I've hit a dead-end recently. I'm trying to position two google embeds (Google maps & forms) side-by-side but that only lead to having awkward aspect ratios between the two. My question is how can I align two iframes (Google maps & forms) embed inside of a container to have them display side-by-side when they're on a desktop and vertically on mobile while maintaining a comfortable aspect ratio(responsive width and height) to the user?
Here's what I have so far:
This is the look I'm going for:
Contact Page with Contact Form and Google Maps embed side-by-side on desktop and vertically aligned on mobile
You would need to use "css media queries" in order to reposition items in an html page based on screen size.
I have made an example here, please feel free to copy paste this code onto your project :).
I can see you are a new developer here, and I would like you to note for next time that it would make people's jobs easier if you could copy your code and paste it into stackoverflow instead of taking a screenshot.
(The snippet below works better when you press on expand snippet and resizes to fit browser size)
<style>
.container{
display: flex; /*Set div as flexbox to override default margins*/
}
iframe{/*Perform to all iframes*/
width: 50%;
margin: 10px;
}
#media only screen and (max-width: 900px) {/*When screen size is below 900px*/
.container{/*Make the form and map stack over each other*/
flex-direction: column;
/*flex-direction: column-reverse;*//* If you want them to stack the other way around*/
}
iframe{
width: 100%;/*Make iframes take up entire screen since they are no longer next to each other*/
}
}
</style>
<div class="container">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSciufqdxJmnuDrbnCQywya61Tbf5sdf0RXKvbu4rNi7_Dba7gyjQ/viewform?embedded=true" id = "form" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:
<div>
<iframe src="blablabla.com" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>
THE CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
Explanation of this CSS
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.
After all this, you can just deal with your iframe
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Related
I am embedding a YouTube video into an HTML page. I want the video to appear as large as possible in the browser window. Here is the CSS that I am using for the embedded iframe:
iframe {
position: absolute;
left:0;
top:0;
height:100%;
width:100%;
overflow: hidden;
}
When the video is playing, it fits the window nicely, keeping its aspect ratio and showing empty space either above-and-below or left-and-right, as I would expect.
However, the initial poster image fills the window completely. I would like it to adjust its height and width so that it has the same dimensions and position as the video.
I thought I could access the elements in the video iframe, to discover the dimensions of the video. However, when I use document.querySelector("iframe").contentWindow.document, I get an error warning that accessing a cross-origin frame is blocked.
How can I detect the aspect ratio of the video, so that I can set the dimensions of the iframe correctly?
I have found a solution. However, it means providing hard-coded values for the dimensions of the video.
On YouTube, I right-click to bring up the "Stats for Nerds" and note the Current / Optimal Res (for example: 1280x720#30). In the HTML, I provide the relevant information as --width and --height CSS variables:
HTML:
<iframe style="
--width:1280;
--height:720;
"
src="https://www.youtube.com/embed/fUyU3lKzoio"
frameborder="0"
allowfullscreen>
</iframe>
In the CSS, I set the width and height to the full size of the window (using vw and vh units, which return the full available size on smartphones and tablets). I also cap the max-height and max-width, to ensure that the aspect ratio of the video is respected:
CSS:
iframe {
width: 100vw;
height: 100vh;
max-height: calc(100vw / var(--width) * var(--height));
max-width: calc(100vh * var(--width) / var(--height));
}
I'm trying to do something that shouldn't be very hard, but surprisingly I haven't been able to find the solution online.
I want to embed iframes to any random website, without the visitors noticing that it's actually a different frame. I want the iframe to merge with the parent body, extending the body of the parent, so that the non-iframe-part and the iframe-part of the website can be scrolled only using the main scrollbar of the parent page.
This is my code so far:
<h1>Tours</h1>
<div style="background-color: red; color: white; padding: 200px; text-align: center;">
Top part of page
</div>
<iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#tourtask-iframe {
width: 100%;
height: 2000px;
border: none;
}
</style>
When I do a overflow: hidden; on the body of the source file of the iframe archive, the scrollbar disappears, but I'm unable to scroll the iframe portion of the page.
I'd need to update the height of the iframe element to fill up the 100% of the height of this file. I'd also need to update the height of the iframe element whenever I expand/collapse any collapsible content in the frame.
How can this be done? Or is there a better way?
I'd preferably not use any library/framework for the parent page, since I'll need to be able to embed this iframe to totally different webpages.
Thank you!
I found an amazing script for this called iFrame Resizer:
https://davidjbradshaw.github.io/iframe-resizer/
It feels any change in height of iframe source document and updates the iframe container accordingly. It took some tweaking and investigation to get it to work.
Please make sure you're complying with following requirements:
The source iframe document must start with <!DOCTYPE html>.
Make sure the body of the iframe document is not 100% (which it is by default when using Material Design for example).
To successfully embed the correctly resizing iframe to the parent document, I'm now using the following code:
<iframe id="tourTaskIframe" scrolling="no" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<script type="text/javascript" src="/public/js/iframeResizer.min.js"></script>
<script type="text/javascript" src="/public/js/iframeConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/iframe-parent.css">
iframeConfig.js:
iFrameResize({
heightCalculationMethod : 'bodyOffset'
}, '#tourTaskIframe');
iframe-parent.css:
iframe{
width: 1px;
min-width: 100%;
border: none;
}
body {
margin: 0;
}
In the styles.css for the iframe source document, in addition to any other styles I'm using for aesthetics, I have the following essential lines:
body {
height: auto !important; /* Essential for resizing */
min-height: 0 !important; /* Essential for resizing */
}
And that's it!
So I am currently designing a website and one of things Im noticing is the div I have placed for the container doesnt exactly flow in the way I want it to when observed in different resolutions. Heres what I have in the CSS:
#container{
position: relative;
width: 100%;
height: 100%;
background-color: black;
}
#center{
background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png);
height:1080px;
width:1920px;
position:absolute;
top:50%;
left:50%;
margin-left: -960px;
margin-top: -540px;
overflow: hidden
}
And here is my HTML:
<div id="container">
<div id="center"></div>
</div>
I pretty much just want the center div to resize on initial load based on the level of zoom the browser is currently at and fit the edges of the div to that zoom while keeping the div's width and height proportions of 16:9. I would like to be able to apply the same scaling to everything that is nested within the div as well if this is possible. But I would like the user to be able to zoom in and out afterwards without the div resizing to fit the screen actively while he is zooming. Im mostly wanting this process without auto zooming the browser because I do not want to mess with the level of zoom the user has on other websites.
The paragraph explaining your goal is quite confusing. Can you explain what you're trying to do better?
#center{
transform:scale(1.5);
transform-origin: center center;
-webkit-transform:scale(1.5);
-webkit-transform-origin: center center;
}
This would scale your div, and all it's children, without changing it's aspect ratio.
Or maybe you could use an actual tag inside #center instead of a background-image. Then you could do this:
#center img{
width: 100%;
height: auto;
}
And this link is an indepth SO post on detecting cross-browser page zoom.
I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.
i have an iframe inside a div. the thing is, the iframe have an expanding menu (expands vertically) inside it. so, the height of the iframe will be dynamic, depending on what item is expanded. when i expand it, it will cut off and not show. below is the code for the div and the iframe.
<div class="camera">
<iframe name="ifra" id="ifra" title ="iframe" src="pages/whitef.html" frameBorder=0 scrolling="no"></iframe>
</div>
this is the css for both item.
iframe#ifra{
position: relative;
width: 810px;
min-height: 750px;
height:100%;
margin-top: -40px;
z-index: 1;
border:none;
overflow:hidden;
}
.camera {
height: 100%;
}
what i want to achieve is that the iframe will expand according to the expanded menu and also not being cut off.
ok this plug-in is out there to do what you requested, but it works only if the iframe src is in your domain.
there is also an article on css tricks you might want to look at.
Answer is in your CSS,
you may write this
overflow-y:scroll; //that will create a scroll in the iframe the content will not be hidden,
while you write OVERFLOW: HIDDEN; it will take the contenr increase in overflow and will cut down, will not shown.
Edit : for new link
Refer Old conversation for the same
http://stackoverflow.com/questions/934323/control-iframe-height-with-jquery
that will do :)