Currently, I have my code configured so that one div is visible from 0-992 pixels browser width, and the other div is visible from 993-infinity browser width. When one div is visible, the other is hidden. The visible div contains a video in the code. However, there seems to be an issue with the .mobileVideo class still showing at 992 pixels. It's just that specific pixel range that seems to be broken and I'm struggling to find a solution for it. If my explanation is unclear, feel free to ask for clarification. Below you can find the HTML and media queries used:
<section class="promoVid">
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<h2>What We Have to Offer</h2>
<div>
<span class="decoration_line"></span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
<div class="col-sm-10 col-sm-offset-1">
<a class="btn defaultBtn btn-block" href="/services">Services</a>
</div>
</div>
<div class="video-responsive"><!--hidden-xs hidden-sm-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/NmeFmmoqzR4?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<section class="mobileVideo"> <!--visible-sm visible-xs-->
<div class="container">
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/NmeFmmoqzR4?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
@media (max-width: 992px) {
.video-responsive {
display: none!important;
}
}
@media (min-width: 993px) {
.mobileVideo {
display: none!important;
}
}