2 side by side youtube videos bootstrap 3

Question

I'm having a problem with my responsive embedded youtube where I have 2 videos side by side. It looks fine until the screen size is mobile. Instead of stacking on top of each other they size down to tiny boxes, like in this picture.

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

HTML code for that top part 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>

Related: https://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width — ThisClark, Jul 23 '17 at 00:41

score 2 · Accepted Answer · answered Jul 23 '17 at 00:10

2

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;
}

answered Jul 23 '17 at 00:10

Sefa Şahinoğlu

494
4
9

score 1 · Answer 2 · answered Jul 23 '17 at 00:39

The following responsive embed applies to any arrangement of the Bootstrap fluid grid layout (and really any element that isn't inline). All we need to do in any flexible container on the web is include this CSS originally sourced from http://embedresponsively.com/ . Moreover, we need to remove the fixed width and height properties from the video iframe or embed 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>

View this snippet in full screen to observe its responsiveness.

score 0 · Answer 3 · answered Jul 23 '17 at 06:18

0

Try adding this onto what you had before:

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

answered Jul 23 '17 at 06:18

Elisa L

262
1
2
11

2 side by side youtube videos bootstrap 3

3 Answers3