I am developing a responsive web page using bootstrap framework, and I want to put a responsive iframe.
The bootstrap docs says that I can put a responsive 16x9 aspect ratio iframe using
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
and the css (included in the bootstrap.css) is
.embed-responsive
{
display: block;
height: 0;
overflow: hidden;
position: relative;
}
.embed-responsive.embed-responsive-16by9
{
padding-bottom: 56.25%
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object
{
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
The result is that the container of the iframe (the div with class "embed-responsive...") is responsive. This takes the correct width and height according to the resolution. But the iframe is overflowed, because it is not resized.
How can I do to resize the iframe to exactly fill the div?
I was having this problem too. I found a somewhat hack solution. In the iframe section: width:100% so it should look like:
<iframe class="embed-responsive-item" src="…" width="100%"></iframe>
I had to set a fixed value for my height because the iframe source isn't responsive.
Hope that helps.
You can use boostrap for this, but it's such a simple task that you really don't need any framework to help you with this. Check out Responsive Iframes; it's not using any frameworks, and is written in native javascript.
I wanted clients to add embedded video anywhere in the site without needing to add special markup or containers. This jQuery function makes all iframes on the page responsive and handles videos too without changing any CSS. Default aspect ratio is 16:9 but you can change the aspect ratio if you want to use 4:3 video or add your own aspect ratio (know of vertical video content being created with phones).
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8
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 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>
Not sure why I can't get this to work. I'm certain I've used this method before but can't find anything on it and can't get the issue resolved. I have a container div that contains a video. The height and width of the video will always adher to the 16:9 ratio of the original video. The video is fixed as I will be adding more content to the container (.featured) div that will overlay over the video. I need the height of the container to equal the height of the video in order to solve my problem (not to mention help out with responsive issues i will run into). My code is as follows:
<div class="featured">
<video loop id="featured-content" class="featured-video" poster="/sites/all/themes/merge/img/poster-frame.jpg">
<source src="/sites/all/themes/merge/img/Atlanta-Test.mp4" type="video/mp4" >
</video>
<div class="main-wrap">
<h1>Learn</h1>
</div>
</div><!--end featured-->
And my sass:
.featured{width: 100%; height: auto;
#featured-content{width: 100%; height: auto;position: absolute;}
}
Problem is the content from the rest of my site is coming up over the top of the video. Need the container div to match the height the video's auto height but can't get it to work for some reason. Any help is much appreciated!
You should be able to drop the height specification, and try adjust display type to inline-block:
.featured {
width: 100%;
display:inline-block;
}
Fiddle (added red border for clarity)
You need to float the video.
#featured-content {
float: left;
}
http://codepen.io/PanosAngel/pen/jqabxJ
I currently have a vimeo video embedded into my website. (code below)
<iframe src="http://player.vimeo.com/video/4415083?api=1;title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
As you can see I have autoplay on, and it also resizes to full width using the code above. My problem is I have just created a video on wideo.co and I need it to react in exactly the same way as the vimeo iframe above. Below is my Wideo iframe, can somebody show me how as I have tried and tried but can not seem to get it right.
<iframe width="540" height="310" src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500" frameborder="0"></iframe>
Full width videos are a bit tricky. There's no one-size-fits-all, but here's the gist of it:
Create a wrapping DIV that has percentage-based padding-top (note: the value will change depending on your situation - you need to play with this value, get a calculator, use dev tools... you'll figure it out).
Position absolute the iframe within the DIV, with a top and bottom set to 0
Set the iframe width and height to auto
Here's some code:
<style>
.video-wrapper {
position: relative;
/*
Play with this value until you get the right aspect ratio.
Note: Percentage based padding is calculated by the width of the containing element.
Note 2: This value will be different for every website and/or media query...
*/
padding-top: 45%;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* this will override the width=""/height="" properties defined on the iframe */
width: auto;
height: auto;
}
</style>
<div class="video-wrapper">
<iframe src="..." width="540" height="310"></iframe>
</div>
If you're lazy, you can also head over to fitvidsjs which handles creating the wrapping DIV and calculating the padding for you. It's a great piece of code and works quite nicely and does not require a calculator. I can calculate padding faster than I can go download the latest fitvids, upload it to my server, and reference it in code... but that's me.
Put the content in div and then add width="100%" to iframe code. Add autoplay back to code.
<div style="overflow: hidden;">
<iframe src="http://www.wideo.co/embed/7022711418637317834?height=300&width=500&autoplay=1" width="100%" height="310" frameborder="0"></iframe>
</div>
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