Issue
I have a flexbox layout that contains the iframe in it. When I use display: flex;
on the parent div, it doesn't display the iframe. When I remove the flex property from the parent div, it display it. I want to be able to keep the flexbox properties whilst having iframe responsive as a child element. How do I resolve this issue?
Here's the jsfiddle.
HTML:
<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>
CSS:
.main-container {
display: flex;
/* removing this shows iframe, want ot keep this flexbox whilst showing iframe scaling */
flex-direction: row;
}
.main-container .embed-container {
position: relative;
padding-bottom: 52.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.main-container .embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Solution
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>
Answered By - aknadif Answer Checked By - Willingham (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.