Positioning Content of an Iframe Within a Containing Div

Position a div containing iframe on right-hand side of screen?

OK, I finally managed something like it using tables.
Not only got on the right hand side, but also bottom right, which was a further goal.

<table id="table"><tr>
    <td id="cell1"> </td>
    <td id="cell2">
        <div id="video">
            <iframe src="https://www.youtube.com/embed/.......></iframe>
        </div>
    </td>
</tr></table>

---

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#table {
    height:100%;
    width:100%;
}
#cell1 {
    width:100%;
}
#video {
    position: absolute;
    width: 50vmax;
    height: 50vmax;
    right: -25vmax;
    padding-bottom: 20vmax;
}
#video iframe {
    border: 0px;
    padding-bottom: 20vmax;
    padding-top: 0vmax;
    width: 20vmax;
    height: 20vmax;
}

positioning a div in an iframe according to the position of a div in another iframe

You need:

1. jQuery offset method to read link's position (in offset().top)
2. Send this value as parameter in link to 2nd iframe
3. use jQuery css method to position content in 2nd iframe, depends on this parameter

div on top of iframe

Super simple stuff..

put an iframe, and a header div inside one container div.

set position:relative on the container, and position:absolute and top:0 on the header div.

that should do it.

HTML:

<div class="holder">
   <div class="bar"></div>
   <iframe class="frame"></iframe>
</div>​

CSS:

.holder{
    width: 400px;
    height: 300px;
    position: relative;
}

.frame{
    width: 100%;
    height: 100%;
}

.bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

fiddle

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>

---

Related Topics