Responsive video embedding
There is no need to use an image to give the wrapper the neccesary height to contain the responsive video. I loaded the image in my browser and found that its dimensions are 75*134, using this we can set the height of the wrapper with a little trick.

HTML code:
    
      
    

&lt;div class="video-wrapper"&gt;   
  &lt;iframe       src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdespeld%2Fvideos%2F10153995755598412%2F&amp;show_text=0&amp;width=560" width="670" height="375" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"&gt;&lt;/iframe&gt;
&lt;/div&gt;


CSS code:

.video-wrapper {
  position: relative;
}
.video-wrapper::after
{
  content : ' ';
  display : block;
  padding-top: 55%; /* 100*75/134 % proportional to the width of the parent */
}
.video-wrapper iframe, 
.video-wrapper object,
.video-wrapper embed,
.video-wrapper video {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top:0;
  z-index:1; /* there is no need of this z-index property */
}


If you need more information about this "trick", refer to this post: https://stackoverflow.com/questions/22673008/css-make-div-width-proportional-to-height

If you know the correct proportion, you'll be able to make it responsive.

And no, there is no problem, it's your layout ;)

Regards.