user2094257 user2094257 - 2 months ago 4x
CSS Question

Bootstrap responsive-embed strange behaviour

I am trying to use bootstrap's responsive-embed to embed a YouTube video but for some reason it doesn't show on the page at all. I know it's on the page as I am using a screenreader which reads it and I can play it and hear the sound but visually it doesn't show at all.
Any idea what i'm doing wrong?

My code:

<div class="embed-responsive">
<iframe class="col-md-4 embed-responsive-item" src=""></iframe>


Your video player isn't visible because Boostrap's default CSS sets .embed-responsive height to 0px.

// From Bootstrap 3.3.7
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;

To display your video player, you'll need to set the height. Looking at Bootstrap's embed-responsive documentation, they provide a few optional dimensions:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class=" col-md-4 embed-responsive-item"  src=""></iframe> 

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class=" col-md-4 embed-responsive-item"  src=""></iframe> 

Alternatively, you could set your own custom height with custom CSS:

.embed-responsive { height:100px; }

See live JSFiddle demo.