Clever Geek Handbook

2 side by side

I have a problem with my responsive embedded youtube where I have 2 videos side by side. It looks great until the screen size is mobile. Instead of stacking on top of each other, they shrink into tiny boxes like in this picture.enter image description here

Here is my page at http://www.pscompetitiveedge.com/references.html

HTML code for this top of the page:

<h1>References</h1>

<div class="row">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?"></iframe>
<p>Click Above To View Testimonial Video!</p>
</div>
</div>

<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?"></iframe>
<p>Click Above To View Peter In Seminar Action!</p>

</div>
</div></div>
<div class="clearfix"></div>
Run codeHide result


+3


source to share


3 answers


You have these codes. in "custom.css: 335"

@media (max-width: 500px)
.col-sm-6 {
    width: 20% !important;
    float: left;
}


Change it to:

@media (max-width: 500px)
.col-sm-6 {
    float: left;
}
+2


source


Depending on the bootstrap grid layout layout (and indeed any element that is not inline) the following reactive nesting is applied. All we need to do in any responsive container on the web is this CSS originally sourced from http://embedresponsively.com/ . In addition, we need to remove fixed properties width

and height

of the movie or the insertion of the container.



.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 1em;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
      

        
        
        
      

    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="col-sm-6">
    <div class="embed-container">
      <iframe src="https://www.youtube.com/embed/oAPdNKTrBYA" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="embed-container">
      <iframe src="https://www.youtube.com/embed/fHFSX3Vd9D0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Run codeHide result


View this snippet in full screen to see how responsive it is.

+1


source


Try adding this to what you had before:

.embed-responsive{
    width: 100%;
    display: block;
}
0


source






More articles:


All Articles