I am trying to embed an iframe of an appointment scheduling frontend in my page. The scheduling program is responsive and when embedding in my page the width is fine. The problem is the frame height is very small. I have tried changing the css everyway I can think of. I have tried multiple different css tricks to no avail. Is this possible with css alone? I have access to both servers. Below is a picture of what I have so far. If the content was full height it would be perfect.
I have read multiple posts on stackoverflow and the web. I tried everything from this site, no go. https://benmarshall.me/responsive-iframes/
Here is an image of what I have now:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://xxx" allowfullscreen></iframe>
</div>
I want the iframe to be the full height of iframe content.
Any help/direction would be appreciated.
I was finally able to make this work using CSS. I had a responsive style-sheet that was overriding my css class. I added the below code and it is working for me. Fortunately I have access to the iframe content and know the height that I needed. In order for this to work this way the iframe content must be responsive already. I used the following code and things are working for me. Wish I hadn't spent so much time on something so simple, but happy I got it going.
.embed-responsive-full {
padding-top: 100%;
height: 720px;
}
Related
i implemented a site (through small JS code) in my original website.
Everything works fine but yesterday i found out that when i first load the page, there is no scroll bar. If i refresh the page, its possible. I played a bit with the parameter 'height' but it didnt work.
Body-Code: <heyflow flow-id="erp-berater-anzeige" height="2000" width="100%" pass-parameters scroll-up-on-navigation></heyflow>
The page: https://entiac.com/erp-stellenanzeige/
PS: Im not deep into coding
I'd advise you to, first of all, add a css file or <style> tag in your index file, which will contain
body{
overflow: visible; !important
}
so you will be sure that isn't an issue. The site has some sort of scrollbar issue even on PC browser, so it would be better to set height:100%- hardcoded values like body height 2000px aren't a good solution.
Other good thing which you could do is divide your site in <section> your code </section>, give them height: 100vh; and make sure your js file loads in one of these sections. This way every section will be full height of your display (100vh = 100 view height). Such a split will make your site bit easier to manage.
Cheers!
I'm trying to embed the IMDB movie trailer iframe into a mobile Ionic app,
problem is that apparently their embed code can't go below 400px width, I've set the parameters for the iframe with the width value as provided by the site:
<iframe src="http://www.imdb.com/video/imdb/vi354465561/imdb/embed?autoplay=false&width=320" width="320" height="480" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder="no" scrolling="no"></iframe>
but all the elements inside their html structure show a fixed width of 400px. If this is a limitation of their page, what recommended alternative can I use to display the trailer correctly over a 320px width viewport? which is what I'm using as default mobile visualisation.
The only workaround I'm applying now is to move the iframe a bit over the container so the fullscreen button is available, but this doesn't look right.
The only solution is to change the iframe's CSS and make it responsive to your vieweport, which might be possible. Try what's mentioned here: How to apply CSS to iframe?
Edit: If all fails, seems like the only fallback could be creating a scrollable container over your iframe so that the user can at least view it completely scrolling. You can do this with the CSS Overflow property
I'm sorry if this question has been already answered, but can't narrow down or ask the question right.
Here goes, I have a client's website that has three embedded iFrames,the website is for Holiday accommodation and uses a Calendar, Booking Enquiry and the floorplans, all come from different vendors.
The problem is they all have different widths and height.
The width in most instances is set to 100% that's fine, but the height is where the problem is, even if I try to set the height to what I want it, it defaults back to a set size.
The default size is 309px and is in two css files needed for the site in general.
Is there a little snippet of code that could over ride that size set in the CSS?
The site in question is here: http://aalen.com.au/aalen1-pims.php
The main area of concern is the Floor plans, they just end up in a smaller iFrame and doesn't show off the potential of those plans. Many thanks
Looking at the page, I can only see one CSS file affecting your iframe, app.css, there are other css files, but none of them change the height of the element.
I assume you're referring to this code from your website.
<iframe frameborder="0" height="400" scrolling="no" src="http://pl.an/aalen-1/embed" width="100%"></iframe>
It looks like you're setting the height in two places, once in app.css with the code:
iframe{
height:390px;
text-align: center;
}
You are also setting the iframe height with the height attribute as seen in the first code example. Try removing the height="400" attribute from your iframe tag and only have the height in the app.css file.
In future you can try using the Firefox developer tools or Chrome developer tools to manipulate the CSS on the page while it is open, in order to see what you need to change, and how it will affect the rest of the content on your page.
I'm having trouble getting the Facebook Comments Plugin responsive. Apparently they constantly change the way of rendering the frame and thus is very difficult to find a solution on the web.
Apparently the newest form was implemented in March 2014.
The old way was by CSS but it does not solve the problem nowadays. Apparently a javascript to rewrite the code that will call the frame code is required. This code should also make the adaptation of "data-width" every change browser size.
Someone already implemented this solution? Does anyone know another way to solve?
Thank you very much.
It looks like you can now specify 100% width in the facebook comments box like so, but it only works for page load. At least it's better than before.
<div class="fb-comments"
data-href="http://example.com/"
data-width="100%"
data-numposts="5"
data-colorscheme="light">
</div>
I still had to add the following CSS if you want to change the width as the window change, and there's not guarantee that it won't change in the future. Hopefully the above code will eventually be fully responsive.
.fb-comments span,
.fb-comments iframe {
width: 100% ! important;
}
I am beginner in a web development and I am working in my senior project which is a web-based system and I want to show the visitors of my website the latest news or updates in the homepage. I want to display them in a dynamic way such as those JQuery sliding images. I tried to display them using the nice images slider from the following website: http://slidesjs.com/
but I failed because its width is big (it is more than 700px) and I tried to play with it using firebug plugin in Firefox and change some numbers in CSS file but I could not be able to make it suitable for my website
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything. I want something with width 700px or less and it can be modified easily.
So could you please help me in this issue? Please provide me with any guide that is helpful to do this issue. Also, please provide me with your suggestions for presenting the latest news in the website?
You just need to modify the width in the css for that slider
<style type="text/css" media="screen">
.slides_container {
width:470px;
height:170px;
}
.slides_container div {
width:470px;
height:170px;
display:block;
}
</style>
If you change those values it should be fine!