Conflict with Bootstrap grid classes

[Diego Aguilar]

I'm trying following markup:

.row(ng-show='currentVideoId')
  .col-md-6
      youtube-video(video-id='currentVideoId')
  .col-md-6
    form.well.text-center(ng-controller='RecordController')
      .form-group
        label Inicio
        br
        button.btn.btn-success Inicio
      .form-group
        label Fin
        br
        button.btn.btn-warning Fin     

The problem is the video frame's coulum is getting overlapped against the continous column:

Then I tried adding the embedded classes:

    .embed-responsive
      youtube-video(video-id='currentVideoId').embed-responsive-item

And then the iframe gets hidden:

I tried also to include manually the classes even I'm already using Bootstrap but got not results. These are the classes I included:

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

[Matt Brandly]

try something like

.row(ng-show='currentVideoId')
  .col-md-6
    .embed-responsive.embed-responsive-16by9
      youtube-video(video-id='currentVideoId').embed-responsive-item

i don't know a lot about bootstrap, but it seems like that should work. i don't think this is really an issue with this repo, however. if you're able to reproduce the issue in a JSFiddle, i can look at the CSS for you 🌟

[Diego Aguilar]

Exactly, adding .embed-responsive-16by9 class worked!

Thanks!

[Matt Brandly]

perfect! glad you got it working!!