html - Bootstrap and fixed iframe -

in current project want add iframe. more specific, want show iframe whenever user clicks on region (on anchor tag) of page or viewing , should shown in way contains css property position: fixed;. after taking on bootstrap website , after searching, not find concerning this.

could explain me how make responsive fixed <iframe>?

i used 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">      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 similar here on stackoverflow result got on jsfiddle)

edit:

after more fiddling, question comes down following: want child element's width position: fixed css property have exact same width bootstrap container element, stay within container. code looks right (try resizing result fiddle window):

jsfiddle

i not wish change of bootstrap css (such removing padding) , height, not matter, can put on height: auto;. how make possible?

this how have adjusted styles:

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

i have added class container embed-responsive 2 can have same width.