I'm struggling to get a map, which is embedded via an iframe on a WordPress page, to show responsively on full height of the screen, independent of the device: http://www.svalbox.no/map.
Full height means, the bottom of the map should not extend beyond the screen, i.e. the user should not have to scroll down to see the full app. The upper limit is obviously the navigation bar.
In the WP page editor, I included the following HTML/CSS (taken from various sources):
<style>
.embed-container {
position: relative;
height: 0; min-height:550px;
padding-bottom: calc(60rem + 10px);
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
small{
position: absolute;
z-index: 40;
bottom: 0;
margin-bottom: -15px;
}
</style>
<div class="embed-container">
<small><a>href="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea" style="color:#0000FF;text-align:left" target="_blank">View larger map</a></small>
<br>
<iframe width="940" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Svalbox" src="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea"></iframe>
</div>
It works for the width, which adapts to the viewport size. Whatever I try though (setting various height: 100%) doesn't work: either nothing happens or the whole map app shrinks to 40px... I know some HTML/CSS, but this one bugs me obnoxiously since hours..
Any help is appreciated.
Thanks
Nils
.embed-container{height:100vh;}
vh unit stands for percent of viewport(browser window) height. 100vh will give 100% of browser window height to the element. currently support for vh unit is limited(https://caniuse.com/#search=vh)
Related
Im making my first web app and im trying to put some iframes with youtube videos on it, the thing is, when i pasted the embed code from youtube, it was too big to the point that it took the entire screen, so i resized it. But now the interface is too big for the size and looks bad. How can i make the interface adaptive to the size? pic related
Thank you.
You have to use responsive styling. For this you need an extra div as wrapper. With next html and css, the youtube will be as wide as the available space (in this css 90% of the available space). Ofcourse both width and height will resize to maintain the 16:9 ratio of an youtube movie.
<style>
.yt {
position: relative;
display: block;
width: 90%; /* width of iframe wrapper */
height: 0;
margin: auto;
padding: 0% 0% 56.25%; /* 16:9 ratio */
overflow: hidden;
}
.yt iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8Pa9x9fZBtY" allowfullscreen></iframe>
</div>
you can but it inside parent container which will control it's size and make the size of your iframe 100%
look here:
Make Iframe to fit 100% of container's remaining height
I'd like to make the size of the video relative to the screen size. However, if I set the height as fixed, on some screen sizes it does not work. Any way I can get the video to fit the screen, but not be out of proportion?
The full code is here: https://github.com/GiacomoLaw/british-airways-virtual/blob/master/index.html
Thank you!
Wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.
<div class="videoWrapper">
<iframe src='https://www.liveflightapp.com/embed?key=b1371aa1-dea8-41cd-af74-8fda634b3a5d' width='100%;' height='500px;' frameborder='0' scrolling='no'></iframe>
</div>
And then apply the following style properties..
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
May be that helps..
My first time embedding a youtube video anywhere, and I'm trying to optimize the video's size for both desktop and mobile.
I want to embed the video with a MAX width of 940 px and MAX height of 630 px, and otherwise the video should be as large as the screen allows. Meaning, mobile devices should have a width of 100% and desktop browsers should have 100% up to the max limits.
Is this possible?
Here's my code so far:
<div style="text-align:center;">
<iframe src="https://www.youtube.com/embed/xxx?rel=0"
frameborder="0" allowfullscreen></iframe>
</div>
I've tried various combinations of width, height, max-width, and max-height, but haven't got it to work.
Put it in a container, and use the good old padding-bottom trick. This way you can make it retain the aspect ratio and control the size of the container instead of the actual embedded thing. The container can be handled like any other normal div.
Here's an example: https://jsfiddle.net/foykobm5/1/
HTML
<div class="main-container">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
.main-container {
max-width: 1000px;
margin: 0 auto;
background: #eee;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
max-width: 940px;
margin: 0 auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I set up a iframe like below
<iframe src="http://www.bbc.com/" frameborder="0" width="100%"></iframe>
CSS
iframe { overflow:hidden;
min-height:600px}
2 horizontal scrolling bars appear, 1 is at the iframe and the other is at the browser.
I want to get rid of the bar at iframe, I try
<iframe src="yahoo.com" scrolling="no" frameborder="0" width="100%"></iframe>
Then the scrolling bar at the iframe disappeared, and the problem is I cannot see anything at the bottom of BBC website!
I could increase min-height to greater number to cover entire length of BBC's page, but sometimes the page is very short and I'll get a huge white space at the bottom! So that increase the min-height is not a good practice.
How can I remove the scrolling bar at the iframe and use the browser's scrolling bar to navigate the page up and down?
Thank you!
There are different ways of doing this. There's jQuery solutions too. This will help you get started:
DEMO: http://jsbin.com/voqubo/1
CSS
body,html {padding:0;margin:0;height:100%;}
html {overflow-y:auto}
.embed-container {
position: relative;
height: 100%;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
}
HTML
<div class='embed-container'><iframe src='http://www.bbc.com/' style='border:0'></iframe></div>
<iframe
src="http://maroof.sa/Business/GetStamp?bid=203783"
style=" width: auto; height: 250px; overflow-y:hidden; "
frameborder="0"
seamless='seamless'
scrollable="no">
</iframe>
I am trying to make my website responsive, and I have a PDF viewer in object tags in the body simply like this:
<object width="950" height="800" data="images/ah.pdf"></object>
Since the width and height are defined, I changed it to:
<div id="custom">
<object data="images/ah.pdf"></object>
</div>
and then adjusted the div in the css portion using percentages. My problem is that the whole PDF viewer does not show, and instead is a small box that has scroll bars on the sides, so you have to scroll left right and top bottom. Is there any way I can get it to adjust the PDF size according to the window size instead of just adjusting the PDF viewer alone? I hope this makes sense as clear as possible. Thank you!
Change your object tag to this:
<object data="images/ah.pdf" style="width: 100%; height: 100%; display: block;"></object>
You can add the style to a class, then include the class in your object tag. Or use another variation to get the styles applied. The width and height will be the same size as its parent container.
#Adam answer may work. I honestly don't deal with much/ BUt I will tell you that I have setup iframes for displays and they are responsive-compatible
This is what I'd do
<div class="content">
<div class="embed-container">
<iframe src="/images/myPDF.pdf" frameborder="0"></iframe>
</div>
</div>
.content {
width: 50%;
margin: 0px auto;
}
.embed-container {
height: 0;
width: 100%;
padding-bottom: 56.25%; /* play with this until right */
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}