Youtube: Embedded video squeezed

Question

I’m embedding a youtube video via the iFrame API. The video itself is square–shaped and it’s width and height depend on the container’s size (a square as well, with fluid dimensions) — I’m using CSS to achieve that.

Everything works more or less okay, but in the beginning and the end of the video (before starting and after stopping), the content is displayed with reduced width, revealing black side bars:

Any idea why this happens or what to do about it? Has someone made a video with irregular shape work in context of a responsive layout?

---

Update

It seems that setting the width and height to 101% helps. Not sure yet how consistently, though.

Answer 1

 <div class="video_iframe_wr">
    <iframe/>
 </div>


  .video_iframe_wr {
  height: 0;
  padding-bottom: 100%; /* that makes height = width */
  position: relative;
}

.video_iframe_wr > iframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
}