CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Barrosy
Barrosy

Reputation: 1457

Bootstrap and fixed iframe

In my current project I want to add an iframe. To be more specific, I want to show an iframe whenever a user clicks on a certain region (on an anchor tag) of the page he or she would be viewing and it should be shown in a way it contains the CSS property position: fixed;. After taking a look on the Bootstrap website and after some searching, I could not find much concerning this.

Could anyone explain me how to make a responsive fixed <iframe>?

I used the following code:

.other-content {
  background-color: tomato;
  height: 1000px;
}
.fixed {
  position: fixed;
  top: 100px;
  height: 500px;
  width: 1080px;
}
<div class="container">
  <div class="other-content">
    Some other content goes in here
  </div>

  <div class="embed-responsive embed-responsive-16by9 fixed">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
  </div>
</div>

(It might not exactly similar here on Stackoverflow to the result I got on Jsfiddle)

Edit:

After some more fiddling, my question comes down to the following: I want a child element's width with position: fixed CSS property to always have the exact same width as the Bootstrap container element, so that it will always stay within the container. This is what my code looks like right now (try resizing the result fiddle window):

Jsfiddle

I do not wish to change any of the Bootstrap CSS (such as removing padding) and as for height, this does not matter, it can be put on height: auto;. How would I make this possible?

Upvotes: 0

Views: 1193

Answers (3)

user379888
user379888

Reputation:

You can not take the width of the container of if the inner div is fixed. You can achieve it using JavaScript.

<div class="container">
  <div class="other-content">
    Some other content goes in here
  </div>

  <div class="fixed">
  <iframe width="100%" height="315" src="https://www.youtube.com/embed/zpOULjyy-n8" frameborder="0" allowfullscreen></iframe>
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0">
    </iframe>
    foo
  </div>
</div>

CSS:

.container
{
  /*padding: 0;*/
}

.other-content
{
  background-color: tomato;
  height: 1000px;
  width: auto;
}

.fixed
{
  position: fixed;
  top: 100px;
  /* How do I fix the padding issue? */
  width: 100%;
  background-color: blue;
  height: auto;
}

@media screen and (max-width: 767px)
{
  .fixed
  {
    /*since width of parent turns to width: auto; so will the following rule be
    and the width turns not to be right. How should I make this equals to the parent element
    aswell when the parent's width is set to auto? */
  }
}

JS:

var widthOfContainer = $(.container ).width();
$(function() {
  $(".fixed").width(widthOfContainer);
});

Fiddle here.

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

Just add this CSS rule

iframe.embed-responsive-item{
 width:100%;
 height:100%;
}

Also Changes to your existing CSS

 .fixed {
  position: fixed;
  top: 100px;
  height: 500px;
  /* width:100%; */ /* remove the width*/
  left:8px;
  right:8px;
}


.other-content {
  background-color: tomato;
  height: 1000px;
}
.fixed {
  position: fixed;
  top: 100px;
  height: 500px;
  left:8px;
  right:8px;
}

iframe.embed-responsive-item{
 width:100%;
 height:100%;
  border:none;
}
<div class="container">
  <div class="other-content">
    Some other content goes in here
  </div>

  <div class="embed-responsive embed-responsive-16by9 fixed">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
  </div>
</div>

Upvotes: 0

Nora
Nora

Reputation: 3261

This is how I have adjusted your styles:

.fixed {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  height: auto;
}

iframe {
  padding: 0 15px;
}

I have also added class container to embed-responsive so the two can have the same width.

Upvotes: 1

Related Questions