video embed overlaps modal</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2015-05-25T22:45:40.910" class="fromnow">May 25 '15 at 22:45</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2015-05-25T23:22:40.397" datetime="2015-05-25T23:22:40.397">May 25 '15 at 23:22</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 645 times"> <span class="fc-light mr2">Viewed</span> 645 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="30446956" data-ownerid="4308333" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="30446956"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>There's a page on my website where I have embedded a livestream from <a class="external-link" href="http://twitch.tv" rel="nofollow noreferrer">twitch.tv</a> and I am experiencing some issues with the livestream overlapping content that it shouldn't. If the user tries to login or register while on that page, then the embedded video will place itself on top on the modal/dialog that opens. The modal is created with Bootstrap 3.</p> <p>It looks like this: <img alt="enter image description here" src="../../images/3794275389.webp"/></p> <p>The iframe embed looks like this:</p> <pre><code>iframe src="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf?channel=imaqtpie" frameborder="0" </code></pre> <p>Anyone know a solution to this?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/twitter-bootstrap" class="post-tag js-gps-track" title="show questions tagged 'twitter-bootstrap'" rel="tag">twitter-bootstrap</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 25 '15 at 23:22">edited May 25 '15 at 23:22</time> <a href="../../users/3250233/kian-cross" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3250233.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kian Cross" /> </a> <div class="s-user-card--info"> <a href="../../users/3250233/kian-cross" class="s-user-card--link">Kian Cross</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,818</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="21 silver badges">21</li> <li class="s-award-bling s-award-blingbronze" title="41 bronze badges">41</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 25 '15 at 22:45">asked May 25 '15 at 22:45</time> <a href="../../users/4308333/just-some-guy" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4308333.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Just some guy" /> </a> <div class="s-user-card--info"> <a href="../../users/4308333/just-some-guy" class="s-user-card--link">Just some guy</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,909</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="21 silver badges">21</li> <li class="s-award-bling s-award-blingbronze" title="32 bronze badges">32</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="30447012"></a> <div id="answer-30447012" class="answer " data-answerid="30447012" data-ownerid="2632478" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="30447012"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You're going to probably look at the CSS <code>z-index</code> attribute.<br/></p> <p>You can manually set them in the order you want, however beware of any overiding css coming from the the boostrap class modal.</p> <p>Although I think it is just the video that needs a lower z-index, as modals are usually given higher values. e.g.<br/></p> <pre><code><iframe style='z-index:0' ... </code></pre> <p>More on this SO post: <a href="../../questions/15440391/how-to-control-div-overlapping-in-html">how to control div overlapping in html</a><br/></p> <p>Fun tutorial if you have the time: <a class="external-link" href="http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892" rel="nofollow noreferrer">http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 11:51">edited May 23 '17 at 11:51</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 25 '15 at 22:52">answered May 25 '15 at 22:52</time> <a href="../../users/2632478/codebender" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2632478.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="codebender" /> </a> <div class="s-user-card--info"> <a href="../../users/2632478/codebender" class="s-user-card--link">codebender</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">78</li> <li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>