I have this code I put together from various sources to allow embedding an iframe of a specific part of a page:
<style type="text/css">
body {background:transparent;
height:2000px;
width:870px;
}
</style>
<div style="border: 1px solid rgb(250, 0, 0); overflow: hidden; margin: 0px auto; max-width: 900px;">
<iframe scrolling="no" src="https://https://sites.google.com/site/yourcommentsite/test" style="border: 0px none; margin-left: -15px; height: 9999px; margin-top: -365px; width: 900px;">
</iframe>
</div>
The reason for this code is explained here: https://sites.google.com/site/yourcommentsite/
The first part is for transparency around the iframe, inside the gadget that will include the iframe (doesn't work with Google Site unless it's in a gadget). Then I make a red bordered "window" that includes the iframe of a site. I size the iframe and position it relative to the "window" and I have the comment section embedded. This code embeds a 900px wide and 9999px long iframe.
This is for use with Google Sites, to allow embedding of a specific part of the page of another Google Site.
The problem is: it's not responsive, so the istructions are a bit complicated and dependent on user's screen resolution, so people trying to use it will be making a fixed size iframe, and other displays will cut the iframe or make it too small. If the iframe is cut/overflows a scrollbar will appear, but it's not the cleanest solution.
I want to make it responsive, but solutions I've seen I can't make them work with the "window" that allows getting a specific part of site only.
I know close to nothing of coding, so could you help me find a solution?
Also, it's very difficult to add javascript to Google Sites, and it doesn't allow src="xxxx.js" or "xxxx.css".
Thanks!
Have a look at my example at http://jsfiddle.net/7k3sscdk/. This works by setting the height and width of everything to 100%. But, if the site that the iframe is pointing to, is not responsive, you can't make the iframe content responsive on your site either.
<iframe src='http://www.example.com' style='border: 0;' width='100%' height='100%' scrolling='no'></iframe>
Related
I have an iframe I want to add to my React.js website. The src of the iframe links to another responsive website (hereby known as "gallery"). This means the width and height of gallery will change depending on the website size. How do I adjust the width/height/styling of the iframe so that like gallery, the iframe also shows all of the webpage contents regardless of screen size?
I tried setting the width and height of the iframe to 100%. While the iframe did span the entire width of the device screen regardless of size, setting the height to 100% unfortunately did not do what I wanted it to. Only a small part of the iframe showed up and the rest was cut off with a scrolling bar. If I set scrolling to "no", the same small part of the iframe would still only show.
I also tried hardcoding the height of the iframe. If I set the height large enough to show all contents on larger screens, some of the content would still be cut off on smaller screens. If I set the height large enough for smaller screens like smartphones, there would be a ton of empty space at the bottom of my website on larger screens that I didn't want.
I am not sure what to do. Some of the things I tried (such as setting height to 100% and setting scrolling to no) were from stackoverflow itself, so I have tried looking at other posts. I'm not sure what to do.
I can share code if needed; this is a personal project, not a school project, so there aren't any consequences of sharing code.
Thanks in advance for the help!
My HTML CODE -
<div class = "container">
<iframe title = "gallery" class = "responsive" src="LINK" frameborder="0" allowfullscreen scrolling="no">
</iframe>
</div>
</div>
MY CSS CODE -
.container {
position: absolute;
width: 100%;
overflow: hidden;
padding-top: 66.66%;
}
.responsive {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
This problem is way more complex than it should be, at one point a solution was part of the HTML 4 spec, but it got dropped I expect due to being to hard to reliable work out the night of the content.
I wrote a library a while ago that tackles these problems, it is called iframe-resize-react and should work in most situations
I am trying to embed this in my site and make my site resize to fit the content so the container with the embedded content has no scroll bar, only the main page (hope this makes sense). Below is what I am doing now, however height 100% won't work
<embed src="https://shop.inventarnd.com/index.php?rt=product/product&product_id=124" style="width: 100%; height: 100%">
The width is working but height does not work.
I have already tried the following
Making parent tags such as html, body, etc... have height 100%
Here is a link to my site where i want to embed it.
https://www.inventarnd.com/test.html
I want to have this web page embedded on my site and have the scroll bar not be there. So have the web page automatically resize to fit the embedded content.
You could use an iframe, this might solve your problem.
embed {
position: absolute;
top: 0px;
left: 0px;
}
The background is clear, so the previous page will show through but the scrollbar and content are all ok. I would change the background to white as well, but I'm not sure what you are and aren't able to do.
I have a website that I am making for a friend, and on the mobile homepage, the footer is perfectly aligned. However, when you go over to either the pics or vids page, the footer is moved over to the left side. The css file can be found here. I have no idea why this is happening, and any help to understand why this is happening, and how to fix it would be great.
Just a quick note, to access the mobile version on desktop, use chrome, open up dev tools, and click on the phone icon in the top left of the dev tools pane. Set the width to 617, and the height to 1002.
Thanks!
Your content is overflowing from the pf-content class, making the page larger than 100% width that the footer is filling.
There are a range of ways to solve this:
Add overflow hidden to pf-content (Will look nasty on small screens)
Set a min width on the whole page body{ min-width: 1200px; }
Make the videos reactive, e.g. display inline blocks which will then wrap to a new line if the page is to small. (Could also be done with media queries used to scale the videos)
I would suggest making the page more responsive, and getting the videos to flow onto new lines if the page is too small to contain multiple. As a general rule tables aren't a great way to structure anything (other than an actual data table) you'd be much better off with a more flexible element. Though this will be more work on your part.
The width of the two iframes for video are set to 520px each which exceed the resolution you were testing on.
The iframes were placed in a table, with a fixed number of columns, causing an issue of overflow.
You can place the iframes in div instead, then change the way they are displayed in css. i.e. you can do a 2 column-like structure in the desktop.css if preferred and a responsive one in the mobile.css
<div class="video-container">
<iframe src="https://player.vimeo.com/video/146191500?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<div class="video-container">
<iframe src="https://player.vimeo.com/video/141281580?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
A lot of sites have embedded Youtube videos. Youtube works on phones now. If responsive design is going to be a thing, why shouldn't it be a thing for iframes that contain Youtube videos?
After searching for days (on and off) I couldn't find a clear, simple solution to the problem (I'm new to HTML/CSS). It's easy to scale iframe width, but to keep height relative I found chunks of javascript, jQuery, and php, all pretty esoteric to a beginner at web design. I wanted a simple method of scaling an iframe's height to always keep a certain aspect ratio, no matter how the width changes.
To keep this from being an unanswered question, the method's below. Here are the initial settings for your iframe:
<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
That's it.
I was wondering if anyone had any other solutions as well.
The solution was nested divs. A little hackey, I know, but it's a really easy solution to a problem that had too many solutions. Youtube videos keep an aspect ratio of 16:9 in this example. Your HTML should look like this:
<div id="outer">
<div id="inner">
<iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>
And your stylesheet:
#outer{
max-width: 640px;
max-height: 360px;
width: 100%;
height: 100%;
}
#inner{
height: 0px;
padding-bottom: 56.25%;
}
#inner iframe{
width: 100%;
height: 100%;
}
The outer div sets the maximum height and width and allows itself to scale, while the inner div uses the padding attribute to match its height to the width of the containing div (I'm pretty sure). The value should be set at (height*100/width)%, the ratio of the height to the width. The iframe then stretches to fill the whole containing div. Whitespace fills on web, so you should be just fine putting text underneath.
I can't remember exactly where I found it. It was done with images somewhere else on Stack Overflow, but I think it's relevant to have it set up to work for iframes since embedded Youtube videos are so common.
Here's a JSfiddle with the working thing.
With the introduction of the aspect-ratio property in CSS, you don't need any clever workarounds, wrappers, or JS.
iframe {
aspect-ratio: 16 / 9;
height: auto;
width: 100%;
}
The property already has excellent support across browsers making it suitable for the majority of sites: https://caniuse.com/mdn-css_properties_aspect-ratio
Working Example
I'm using the Google Charts API which renders charts using an <iframe>, however there's an large amount of white space on both the bottom and top parts which I'd like to remove. I've been attempting to do this in a variety of ways (explained below), but can't seem to get it to work out how I want it to;
My HTML markup
<div id="chart">
<div id="chart-contents">
<iframe name="Drawing_Frame_49918" id="Drawing_Frame_49918" width="690" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div
The <iframe> is included via javascript, and so not actually part of my mark-up; but part of the DOM post-load.
My CSS Styling
#chart {
padding-top: 15px;
margin: auto;
width: 690px;
height: 155px;
overflow: hidden;
}
#chart-contents {
margin-top: -45px;
}
#chart-nav {
margin-top: 15px;
padding: 0px 15px;
}
The intent of this CSS is to restrict the height of the container element #chart to 155px (where the <iframe> height is 200px), and hide the overflow. Then #chart-contents is pushed up by 45px but because the overflow is hidden, it's still contained within the same 155px area, and thus the middle and x-axis of the chart is shown.
However, this doesn't seem to work, as while clipping off the bottom part of the <iframe> by setting a restricting height and overflow to hidden, attempts to #chart-contents up have all failed.
So far I've tried;
Use of negative top, padding-top and margin-top properties.
Positioning of absolute and relative in conjunction with top.
Using the clip property in conjunction with a relative position.
I'm starting to think that this is something that perhaps isn't possible without further elements or javascript?
Any suggestions and answers for how to rectify this in an efficient way (ideally sticking to just CSS properties for the already existing elements if possible) would be greatly appreciated!
If you feel like you need more information or some kind of visualization please just ask. I would jsFiddle this for you, but because of their AJAX policies and Google's API use of AJAX, it's rather difficult.
You could always place the previous element on top of your iframe so it looks like it's starting sooner than it actually is. This obviously works for an element coming after the iframe as well.
All you need to do to achieve this is to give the element position: relative.
Preview: http://jsfiddle.net/Wexcode/XyVGr/