1

please, could you give me an advice, how to fit youtube embed video to browser size? I need to fully fill website, but I don't know, how to do it. Now my video fits to the width or height. But I need both. Do you know, how to do it?

My code till now: HTML:

<div id="bg" class="bg background-image">
          <div class="embed-container">
                <div id="youtube-player"></div> <!-- this row is replaced by iframe with video. i'm using youtube data api.... -->
          </div>
</div>

CSS:

html{
  height: 100%;
}
body {
  min-height: 100%;
}
.bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
}
.background-image {
    background: #000;
    background-size: cover;
    min-height: 100%;
    position:absolute;
    bottom:0;
    left:0;
}
.background-overlay {
    background: url('../assets/images/bg_pattern.png') left top;
}
Jan Kožušník
  • 683
  • 3
  • 16
  • 30

1 Answers1

0

body{margin:0;padding:0}
#youtube-player{width:100%!important;height:100vh;marign:0 ;padding:0}
<div id="bg" class="bg background-image">
          <div class="embed-container">
              <iframe id="youtube-player"  src="//www.youtube.com/embed/ibXepDwdzjs" frameborder="0" allowfullscreen></iframe>
               <!-- this row is replaced by iframe with video. i'm using youtube data api.... -->
          </div>
</div>

I think you can make something like this only with css

Victor Sitnic
  • 380
  • 2
  • 6
  • 1
    You are almost right. Problem of this solution is, that if I'm making smaller browser's width, video becames heigth centered and has at bottom and top black margin - it doesn't fit... :/ and I need to fully fill website – Jan Kožušník Dec 20 '14 at 14:06