How does this responsive-iframe-container snippet work?
Well, for whatever reason (often I find answers while asking questions, and delete the question), I just decided to google for responsive iframe and found this as the second result, which is probably where the code came from. It explains everything in detail and, basically, it is actually all together that makes it work and vresponsive
has nothing to do with it.
Quoting from its summary:
Embedded content has a habit of breaking responsive layouts, because it’s contained in an iframe with a fixed width. In this article, we’ve seen how to add a single containing wrapper, and some CSS, to ensure that all embedded content contained in an iframe resizes with the browser’s window.
And from the part it explains a bit about each detail there:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
This does a few things:
- Setting the
position
torelative
lets us use absolute positioning for theiframe
itself, which we’ll get to shortly.- The
padding-bottom
value is calculated out of the aspect ratio of the video. In this case, the aspect ratio is 16:9, which means that the height will be 56.25% of the width. For a video with a 4:3 aspect ratio, we setpadding-bottom
to 75%.- The
padding-top
value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.- The
height
is set to0
becausepadding-bottom
gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.- Setting
overflow
tohidden
ensures that any content protruding outside of this element will be hidden from view.
We also need to style the iframe itself. Add the following to your style sheet:
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This targets
iframe
s inside containers with the.video-container
class. Let’s work through the code:
- Absolute positioning is used because the containing element has a height of
0
. If the iframe were positioned normally, we would have given it a height of0
as well.- The
top
andleft
properties position the iframe correctly in the containing element.- The
width
andheight
properties ensure that the video takes up 100% of the space used by the containing element (which is actually set with padding).
Having done this, the video will now resize with the screen’s width.
How do I keep responsive iframe within a flexbox layout?
i think you made a mistake in your css file, you don't have to make a position absolute in side flexbox child
CSS
.main-container {
display: flex;
/* removing this shows iframe, want ot keep this flexbox whilst showing iframe scaling */
flex-direction: row;
align-items: center;
}
.main-container .embed-container {
padding-top: 30px;
position: relative;
padding-bottom: 52.25%;
height: 0;
overflow: hidden;
}
@media (max-width: 800px) {
.main-container {
flex-direction: column;
}
}
<div class="main-container">
<div class="embed-div">
<div class="embed-container">
<iframe width="552" height="280" src="https://www.youtube.com/embed/EngW7tLk6R8?modestbranding=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
<div class="content-container">
<p>Marzipan topping liquorice candy chocolate. Carrot cake donut candy canes marshmallow muffin cookie jujubes shortbread cheesecake. Chocolate bar powder danish donut croissant. Cotton candy tootsie roll apple pie sesame</p>
</div>
</div>
How Do I Make Sure An iFrame's Aspect Ratio Is Responsive?
You really don't need media query to achieve this but if you want, you can shift it inside media query. So, how is it being achieved?
Since, we know we need the aspect ratio of 16:9
and the width should not exceed 90vw, thus the height should also not exceed 50.85vw. And we set the max-height and max-width
according to your absolute dimension limits that is 600px and 338 px of the container.
Now, setting the iframe dimensions to the 100% of the container
, it inherits that dimensions. :)
.tv-wrapper { max-width:600px; max-height:338px; width:90vw; height:50.85vw; margin:0 auto;}iframe { width:100%; height:100%;}
<div class="container"> <div class="tv-wrapper"> <iframe class="sproutvideo-player" src="//videos.sproutvideo.com/embed/489adcb51e1debcdc0/e0d9daac7a1a9b30?bigPlayButton=false&showControls=false" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> </div>
Iframe doesn't resize! and work responsive
When I go to your website, the iframe
is not responsive, because the width and height of the iframe are set inline. You need to set these (or alter them) via the CSS to make it responsive.
That the iframe in the plain HTML file is 'responsive' is because it just shows the whole page, because there's no viewport set. (In your main website, this is the viewport: <meta name="viewport" content="width=device-width, initial-scale=1">
). It feels responsive, but is not.
So what you need to do:
- Remove the inline height and width set on the iframe.
- Add code to your CSS to make the iframe responsive. See my small example below on how to do this. Play around with it to fit it your needs (and viewports).
.iframe-container { position: relative; width: 100%; padding-bottom: 50%; background: lightgrey;}
.iframe-container iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid red;}
<div class="iframe-container"> <iframe src="http://spreadshirt.com/"></iframe></div>
How do I make iframes responsive without using div?
If you can use viewport units that is doable without an extra wrapper element.
Full page width:
iframe { width: 100vw; height: 56.25vw; /*16:9*/}
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
Related Topics
Interruption of a CSS Transition Does Not Work for Same Attribute Value
How to Change The Color of Bootstrap Checkbox
Working with CSS Floats in HTML2Pdf
CSSmin Not Correctly Handling @Import
Media Query About Screen Size Instead of Resolution
Ionic - How to Wordwrap a Long String in Ion-Header
Ruby on Rails Dropdown <Select> Menu - How to Style or Apply Class to The Options
Change CSS Variables Dynamically in Angular
Overriding CSS on Github Pages Using Slate Theme
How to Prevent CSS Declaration Dropped Errors Cross Browser
Cumulative Layout Shift with Bootstrap 4 Grid
Center Text Larger Than Container? (Without Using Separate Child Element)
Material-Ui Style Dialog/Modal Backdrop
Adjust Size of Shiny Progress Bar and Center It