I am trying to add a Google Map to my design, that is supposed to be responsive. I've used the same code that works out for images... But for some reason, the map's iframe resizes with dimensions I didn't pick.
HTML
<iframe src="http://maps.google.com/maps/ms?vpsrc=6&ctz=-480&ie=UTF8&msa=0&msid=210840796990572645528.00049770919ccd6759de3&t=m&ll=30.751278,68.203125&spn=84.446143,175.429688&z=2&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>
and the CSS
iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}
Or you can view it live and fiddle with it here:
http://jsfiddle.net/corinne/pKUzU/
(if you cut away the CSS, you will see what i mean).
My question is how to make this iframe/map be responsive without losing its wanted height?
This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.
HTML
<div class="iframe-rwd">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
CSS
.iframe-rwd {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
Parent div is absolute, child div contains iframe. I want iframe to expand. I have managed to achieve this by setting child to fixed position.
However, what is causing a problem is that I have some transform translate on parent div and this causes iframe to loose width again. I cannot modify or remove this translate which is complicated (like transform: translate(836.152px, 253.619px) translateZ(9999px) rotate(0deg))
Demo here:
http://jsfiddle.net/5bk6dn7y/1/
Everything works well if you remove translate, but again I cannot modify or remove this.
One fix it to add:
iframe {
width: 1000%;
}
but this is not a solution because on small screen, it will not automatically shrink to max screen width.
Full code, use jsfiddle instead because this snippet wont play youtube in iframe.
#a {
position: absolute;
background: red;
top: 50px;
transform:translateX(10px);
}
#b {
position: fixed;
width: 100%;
background: blue;
max-width: 400px;
}
iframe {
width: 100%;
height: 200px;
}
<div id="a">
<div id="b">
<iframe src="https://www.youtube.com/embed/Yx7mIu2qspw?autoplay=1" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen=""></iframe>
</div>
</div>
I'm trying to make iframe responsive inside div, there are plenty of resources on the web on how to do this, but the common solution is not working for my case for YouTube video embeds.
I'm using Skeleton CSS Boilerplate. I have a nested div structure like so:
<div class="container">
<div class="row item">
<div class="six columns">
<iframe> </iframe>
</div>
<div class="six columns">
<iframe> </iframe>
</div>
</div>
</div>
The iframe were protruding outside the right edge of the containing div (class .six.columns) so I tried the following two css strategies (below).
However, with each of these strategies, <iframe> have become huge, and seem to have taken on the width of the .container div (or perhaps the .row div), instead of the immediate parent, the .six.columns div.
div > iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
and
div.six.columns iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I just want the <iframe> to responsively fit inside the .six.columns div. How can I achieve this?
Set the container to position:relative in order to have the absolute to work.
To maintain the video aspect ratio, wrap the iframe into another div, and use the padding trick. Let's say the video is 16:9, the padding-bottom value would be 9/16=56.25%. Simple demo follows.
https://jsfiddle.net/dfkhkLhp/
.youtube {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="youtube">
<iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
Here is the code for iframe video:
<div>
<iframe src="https://player.vimeo.com/video/135943631?autoplay=0&color=c9ff23&
title=0&byline=0&portrait=0" width="1000" height="1000" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Now it shows like this.
May i know how to avoid this black bar below and above the video.
I tried using following code:
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 20px;
height: 0;
background-color:#fff;
}
html:
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/135943631?autoplay=0&
color=c9ff23&title=0&byline=0&portrait=0" width="800px" height="450px"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
Note: I should not change height. Because i need big size video.
Can Any one suggest me, how can i achieve this?
The black bars are appearing because your video is in aspect ratio of 16:9 and you are trying to fit with inside iframe of 1000px/1000px.
So your height is scaled according to aspect ratio, i.e., video height is 1000 * 9/16 = ~584px and remaining 420px are empty. Since vimeo has the video background as black color, this empty space is appearing as black bars.
To fix your problem, its better to have iframe with width/height in 16:9 ratio. (example: width: 800px; height: 450px)
I have an iframe and i need it to have a scrolling overflow. it seems work out in desktop, i used a work around to make it work in iOS. it works on android and iOS now. however, iOS8 it fails.
<html>
<body>
<style type="text/css">
.scroll-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
Use the code in this way
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="width:100%;height:600px" src="www.iframe.com"></iframe>
</div>
In order to make an iframe scrollable on iOS, you have to add the CSS3 property -webkit-overflow-scrolling: touch to the parent container:
<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe src="./yxz" style="width:100%;height:100%">
</div>
I finally got mine working after many hours and testing. Basically what worked for me was this (shown as inline styling to demo).
Making the outer div overflow auto keeps it from displaying an extra set of scrollbars on desktops.
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe>
</div>
it did not work for me! but I could figure out a little trick after reading this post:
https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/
Just put an !important after that and works just fine!
-webkit-overflow-scrolling: touch !important;
overflow-y: scroll !important;
I found that fixes 1 and 2 work on iOS 11, but I also found that in loading a responsive page into the iframe, overflow-x: hidden; was also needed to keep the iframe from moving left and right on scroll y attempts. Just FYI.
There is a bug in iOS 8 that breaks scrolling all together when -webkit-overflow-scrolling:touch has been applied to anything that is overflown.
Have a look at the issue I posted a few weeks ago:
-webkit-overflow-scrolling: touch; breaks in Apple's iOS8
The must is define your scroll-container to fixed for the div is a fullscreen size. Then inside the iframe create a main content who have a properties scrolling.
Inside you iframe, in the mainContainer-scroll, you can add:
-webkit-overflow-scrolling: touch //For active smooth scroll
-webkit-transform: translate3d(0, 0, 0) //For material acceleration
overflow-y:scroll; //For add scrolling in y axis
position:absolute;height:100%;width:100%;top:0;left:0; //For fix the container
Main page
<html>
<head>
<style type="text/css">
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
position:fixed;
}
</style>
</head>
<body>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
</html>
Inside Iframe
<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;">
<div class="Content" style="height:2000px;width:100%;background:blue;">
</div>
</div>
Not knowing what is on the other end of "www.iframe.com"...but for me, in that file's css I added:
body {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
That fixed it.
You have to use on body style or
overflow:scroll;
Or also use
<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch">
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe>
</div>
I was able to make an iframe scroll in iOS by placing an iframe inside a div (which acts as container) and apply the styles as follows and this works perfectly.
.iframe {
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
}
.div {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #FFF;
}
As i am working in GWT, for GWT people here is the suggestion.
In case of GWT just place an iframe in ScrollPanel (div) and apply the styles as above.
I need to embed a YouTube video into my responsive site but it's not scaling correctly, especially on mobile.
It looks fine on desktop and tablets but once you get below a viewport width of 600, the video breaks its container. To view the whole video on mobile you need to pinch out to a point that the rest of the content only fills about 1/2 the screen vertically. Not so good.
I want the text content to be 1/3 wide and the video to be 2/3 wide on desktop and tablets and stacked on mobile with the video and content both 100% of the viewport width. I've tried using width="100%" on the iframe but then the height doesn't scale correctly as you resize and the video either gets stretched or squished.
I also need to do it with CSS only as i'm simply laying my stylesheets over stock bootstrap 3.0.
Here's my code:
<div class="container">
<div class="row">
<div class="col-sm-4">Content. This is content, it is not meant to be read or understood. Something random goes here, it can be whatever you want, it's just blankish content provided so that it fills up some space, pretty boring huh?</div>
<div class="col-sm-8">
<iframe width="600" height="338" src="http://www.youtube.com/embed/KgMt0dtr4Vc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a Bootstrap3 native solution:
http://getbootstrap.com/components/#responsive-embed
since Bootstrap 3.2.0!
If you are using Bootstrap < v3.2.0 so look into "responsive-embed.less" file of v3.2.0 - possibly you can use/copy this code in your case (it works for me in v3.1.1).
I know it's late, I have the same issue with an old custom theme, just added to boostrap.css:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
And for the video:
<div class="embed-responsive embed-responsive-16by9" >
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jVIxe3YLNs8"></iframe>
</div>
Have a think about wrapping the videos inside something which you can make flexible via bootsrap.
The bootstrap is not a magic tool, its just a layout engine. You almost have it in your example.
Just use the grid provided by bootstrap and remove strict sizing's on the iframe. Use the bootstrap class guides for the grid..
For example:
<iframe class="col-lg-2 col-md-6 col-sm-12 col-xs-12">
You will see how the class of the iframe will change then given your resolution.
A Fiddel too : http://jsfiddle.net/RsSAT/
Well it has a simple and easy solution. You can make your video easily to fit for any device and screen size.
Here is the HTML and CSS code:
.yt-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.yt-container iframe, .yt-container object, .yt-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="yt-container">
<iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe>
</div>
Source: https://www.codespeedy.com/make-youtube-embed-video-responsive-using-css/
It also depend on how you style your site with bootstrap.
In my example, I am using col-md-12 for my video div, and add class col-sm-12 for the iframe, so when resize to smaller screen, the video will not view squeezed.
I add also height to the iframe:
<div class="col-md-12">
<iframe class="col-sm-12" height="333" frameborder="0" wmode="Opaque" allowfullscreen="" src="https://www.youtube.com/embed/oqDRPoPDehE?wmode=transparent">
</div>
I use bootstrap 3.x as well and the following code fore responsive youtube video embedding works like charm for me:
.videoWrapperOuter {
max-width:640px;
margin-left:auto;
margin-right:auto;
}
.videoWrapperInner {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 50%;
padding-top: 25px;
height: 0;
}
.videoWrapperInner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
I gave a similiar answer on another thread (Shrink a YouTube video to responsive width), but I guess my answers can help here as well.
This works fine for me...
.delimitador{
width:100%;
margin:auto;
}
.contenedor{
height:0px;
width:100%;
/*max-width:560px; /* Así establecemos el ancho máximo (si lo queremos) */
padding-top:56.25%; /* Relación: 16/9 = 56.25% */
position:relative;
}
iframe{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
}
and then
<div class="delimitador">
<div class="contenedor">
// youtube code
</div>
</div>